feature(service): Add Whimsical and Figma services

README.md

@@ -12,7 +12,7 @@ Tool uses Editor.js pasted patterns handling and inserts iframe with embedded co
 - [Facebook](https://www.facebook.com) - `facebook` service
 - [Instagram](https://www.instagram.com/codex_team/) - `instagram` service
 - [YouTube](https://youtube.com) - `youtube` service
-- [Twitter](https://twitter.com) - `twitter` service. (official twitter api is used for render, no need to use twitframe)
+- [Twitter](https://twitter.com/codex_team) - `twitter` service. (<https://twitframe.com> used for render)
 - [Twitch](https://twitch.tv) - `twitch-video` service for videos and `twitch-channel` for channels
 - [Miro](https://miro.com) - `miro` service
 - [Vimeo](https://vimeo.com) — `vimeo` service
@@ -25,10 +25,10 @@ Tool uses Editor.js pasted patterns handling and inserts iframe with embedded co
 - [CodePen](https://codepen.io) — `codepen` service
 - [Pinterest](https://www.pinterest.com) - `pinterest` service
 - [GitHub Gist](https://gist.github.com) - `github` service
+- [Figma](https://www.figma.com/) - `figma` service
+- [Whimsical](https://whimsical.com/) - whimsical service
 - 👇 Any other [customized service](#add-more-services)
 
-
-
 ## Installation
 
 Get the package
@@ -151,6 +151,7 @@ var editor = EditorJS({
 ```
 
 #### Inline Toolbar
+
 Editor.js provides useful inline toolbar. You can allow it\`s usage in the Embed Tool caption by providing `inlineToolbar: true`.
 
 ```javascript
@@ -180,7 +181,6 @@ var editor = EditorJS({
 | height  | `number` | embedded content height
 | caption | `string` | content caption
 
-
 ```json
 {
   "type" : "embed",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/embed",
-  "version": "2.7.6",
+  "version": "2.7.7",
   "keywords": [
     "codex editor",
     "embed",
@@ -54,10 +54,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
     "vite": "^4.5.0",
-    "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-css-injected-by-js": "^3.3.0"
   },
-  "dependencies": {
-    "@editorjs/editorjs": "^2.29.1"
-  }
+  "dependencies": {}
 }

src/services.ts

@@ -1,7 +1,5 @@
 /* eslint-disable no-useless-escape */
-import type { ServicesConfigType } from './serviceConfig';
-
-const SERVICES: ServicesConfigType = {
+export default {
   vimeo: {
     regex: /(?:http[s]?:\/\/)?(?:www.)?(?:player.)?vimeo\.co(?:.+\/([^\/]\d+)(?:#t=[\d]+)?s?$)/,
     embedUrl: 'https://player.vimeo.com/video/<%= remote_id %>?title=0&byline=0',
@@ -20,7 +18,7 @@ const SERVICES: ServicesConfigType = {
         return id;
       }
 
-      const paramsMap: Record<string, string> = {
+      const paramsMap = {
         start: 'start',
         end: 'end',
         t: 'start',
@@ -29,7 +27,7 @@ const SERVICES: ServicesConfigType = {
         list: 'list',
       };
 
-      let newParams = params.slice(1)
+      params = params.slice(1)
         .split('&')
         .map(param => {
           const [name, value] = param.split('=');
@@ -40,21 +38,21 @@ const SERVICES: ServicesConfigType = {
             return null;
           }
 
-          if (!(paramsMap[name])) {
+          if (!paramsMap[name]) {
             return null;
           }
 
-          if (value === 'LL' ||
-            value.startsWith('RDMM') ||
-            value.startsWith('FL')) {
+          if (value === 'LL'
+            || value.startsWith('RDMM')
+            || value.startsWith('FL')) {
             return null;
           }
 
           return `${paramsMap[name]}=${value}`;
         })
         .filter(param => !!param);
 
-      return id + '?' + newParams.join('&');
+      return id + '?' + params.join('&');
     },
   },
   coub: {
@@ -131,21 +129,20 @@ const SERVICES: ServicesConfigType = {
     id: (ids) => ids.join('/embed/'),
   },
   instagram: {
-    //it support both reel and post
-    regex: /^https:\/\/(?:www\.)?instagram\.com\/(?:reel|p)\/(.*)/,
+    regex: /https?:\/\/www\.instagram\.com\/p\/([^\/\?\&]+)\/?.*/,
     embedUrl: 'https://www.instagram.com/p/<%= remote_id %>/embed',
     html: '<iframe width="400" height="505" style="margin: 0 auto;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>',
     height: 505,
     width: 400,
     id: (groups: string[]) => groups?.[0]?.split("/")[0],
   },
   twitter: {
-    regex: /^https?:\/\/(www\.)?(?:twitter\.com|x\.com)\/.+\/status\/(\d+)/,
-    embedUrl: 'https://platform.twitter.com/embed/Tweet.html?id=<%= remote_id %>',
+    regex: /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(?:es)?\/(\d+?.*)?$/,
+    embedUrl: 'https://twitframe.com/show?url=https://twitter.com/<%= remote_id %>',
     html: '<iframe width="600" height="600" style="margin: 0 auto;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>',
     height: 300,
     width: 600,
-    id: ids => ids[1],
+    id: ids => ids.join('/status/'),
   },
   pinterest: {
     regex: /https?:\/\/([^\/\?\&]*).pinterest.com\/pin\/([^\/\?\&]*)\/?$/,
@@ -183,6 +180,21 @@ const SERVICES: ServicesConfigType = {
     width: 600,
     id: (groups) => `${groups.join('/')}.js`,
   },
+  whimsical: {
+    regex: /(https:\/\/)?whimsical.com\/(?:[a-zA-Z0-9\-]+\-)?([a-km-zA-HJ-NP-Z1-9]{16,22})(@[a-km-zA-HJ-NP-Z1-9]+)?/,
+    embedUrl: 'https://whimsical.com/embed/<%= remote_id %>',
+    html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
+    height: 300,
+    width: 600,
+    id: (ids) => ids[1]
+  },
+  figma:{
+    regex: /(https:\/\/www\.figma\.com\/.*)?/,
+    embedUrl: 'https://www.figma.com/embed?embed_host=share&url=<%= remote_id %>',
+    html: "<iframe height='450' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
+    height: 300,
+    width: 600
+  },
 };
 
 export default SERVICES;

test/services.ts

@@ -463,3 +463,30 @@ describe('Miro service', () => {
   })
 });
 
+describe('whimsical', () => {
+  it('should correctly parse URL got from a browser', () => {
+    const regularBoardUrl = 'https://whimsical.com/test-86ajy7vWEzYATvwFFvbwfA';
+    const event = composePasteEventMock('pattern', 'whimsical', regularBoardUrl);
+
+    embed.onPaste(event);
+
+    expect(patterns.whimsical.test(regularBoardUrl)).to.be.true;
+    expect(embed.data.service).to.be.equal('whimsical');
+    expect(embed.data.embed).to.be.equal('https://whimsical.com/embed/86ajy7vWEzYATvwFFvbwfA');
+    expect(embed.data.source).to.be.equal(regularBoardUrl);
+  });
+});
+
+describe('figma', () => {
+  it('should correctly parse URL got from a browser', () => {
+    const regularBoardUrl = 'https://www.figma.com/file/3BYrViWFPvfhbrpm1aO3ha/Untitled?type=design&node-id=0%3A1&mode=design&t=WutMRT9L8VJNEL5z-1';
+    const event = composePasteEventMock('pattern', 'figma', regularBoardUrl);
+
+    embed.onPaste(event);
+
+    expect(patterns.figma.test(regularBoardUrl)).to.be.true;
+    expect(embed.data.service).to.be.equal('figma');
+    expect(embed.data.embed).to.be.equal('https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/3BYrViWFPvfhbrpm1aO3ha/Untitled?type=design&node-id=0%3A1&mode=design&t=WutMRT9L8VJNEL5z-1');
+    expect(embed.data.source).to.be.equal(regularBoardUrl);
+  });
+});