diff --git a/README.md b/README.md index 650acb97..d91bd147 100644 --- a/README.md +++ b/README.md @@ -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", diff --git a/package.json b/package.json index c1087c17..bb63bbc7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/embed", - "version": "2.7.6", + "version": "2.7.7", "keywords": [ "codex editor", "embed", diff --git a/src/services.ts b/src/services.ts index 27e8e9c2..f536aaef 100644 --- a/src/services.ts +++ b/src/services.ts @@ -40,7 +40,7 @@ const SERVICES: ServicesConfigType = { return null; } - if (!(paramsMap[name])) { + if (!paramsMap[name]) { return null; } @@ -131,7 +131,6 @@ const SERVICES: ServicesConfigType = { id: (ids) => ids.join('/embed/'), }, instagram: { - //it support both reel and post regex: /^https:\/\/(?:www\.)?instagram\.com\/(?:reel|p)\/(.*)/, embedUrl: 'https://www.instagram.com/p/<%= remote_id %>/embed', html: '', @@ -183,6 +182,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: "", + 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: "", + height: 300, + width: 600 + }, }; export default SERVICES; diff --git a/test/services.ts b/test/services.ts index 1685d840..d67d712a 100644 --- a/test/services.ts +++ b/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); + }); +});