fix(addon-editor): support write simple text after marked link (#3021)

projects/addon-editor/components/toolbar/toolbar.component.ts

@@ -223,7 +223,6 @@ export class TuiToolbarComponent {
 
         if (url) {
             this.editor.toggleLink(url);
-            this.editor.selectClosest();
         }
     }
 

projects/addon-editor/extensions/default-editor-extensions/default-editor-extensions.ts

@@ -15,9 +15,7 @@ export const defaultEditorExtensions = [
     import(`@tiptap/extension-image`).then(({default: Image}) =>
         Image.configure({inline: true}),
     ),
-    import(`@tiptap/extension-link`).then(({default: Link}) =>
-        Link.configure({openOnClick: false}),
-    ),
+    import(`@taiga-ui/addon-editor/extensions/link`).then(({TuiLink}) => TuiLink),
     import(`@taiga-ui/addon-editor/extensions/jump-anchor`).then(
         ({TuiJumpAnchor}) => TuiJumpAnchor,
     ),

projects/addon-editor/extensions/link/index.ts

@@ -0,0 +1 @@
+export * from './link';

projects/addon-editor/extensions/link/link.ts

@@ -0,0 +1,38 @@
+import {getHTMLFromFragment} from '@tiptap/core';
+import {Link} from '@tiptap/extension-link';
+
+export const TuiLink = Link.extend({
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            toggleLink:
+                attributes =>
+                ({chain, state}) => {
+                    {
+                        const {selection, doc} = state;
+                        const selected = doc.cut(selection.to, selection.to + 1);
+                        const sliced = getHTMLFromFragment(
+                            selected.content,
+                            state.schema,
+                        ).replace(/<\/?[^>]+(>|$)/g, ``);
+                        const forwardSymbolIsWhitespace = sliced === ` `;
+
+                        const toggleMark = chain().toggleMark(this.name, attributes, {
+                            extendEmptyMarkRange: true,
+                        });
+
+                        return (
+                            forwardSymbolIsWhitespace
+                                ? toggleMark.setTextSelection(selection.to + 1)
+                                : toggleMark.setTextSelection(selection.to).insertContent(
+                                      // require: `@tiptap/extension-text-style`
+                                      `<span style="font-size: 15px"> </span>`,
+                                  )
+                        ).run();
+                    }
+                },
+        };
+    },
+}).configure({
+    openOnClick: false,
+});

projects/addon-editor/extensions/link/ng-package.json

@@ -0,0 +1,8 @@
+{
+    "lib": {
+        "entryFile": "index.ts",
+        "styleIncludePaths": [
+            "../../../core/styles"
+        ]
+    }
+}

projects/demo-integrations/cypress/tests/desktop/addon-editor/editor-links.cy.ts

@@ -71,7 +71,9 @@ describe(`Editing links in Editor`, () => {
 
         tuiGetScreenshotArea().matchImageSnapshot(`3-1-before-remove-link`);
 
+        tuiOpenAnchorDropdown({containHref: `http://wysiwyg.com`});
         tuiTrashValueByEditLink();
+
         tuiClearHint();
 
         tuiGetScreenshotArea().matchImageSnapshot(`3-2-after-remove-link`);

projects/demo/src/modules/components/editor/examples/8/index.ts

@@ -19,8 +19,9 @@ import {TUI_EDITOR_EXTENSIONS, TuiEditorTool} from '@taiga-ui/addon-editor';
                     ({createImageEditorExtension}) =>
                         createImageEditorExtension(injector),
                 ),
-                import(`@tiptap/extension-link`).then(({Link}) =>
-                    Link.configure({openOnClick: false}),
+                import(`@tiptap/extension-text-style`).then(({TextStyle}) => TextStyle),
+                import(`@taiga-ui/addon-editor/extensions/link`).then(
+                    ({TuiLink}) => TuiLink,
                 ),
                 import(`@taiga-ui/addon-editor/extensions/jump-anchor`).then(
                     ({TuiJumpAnchor}) => TuiJumpAnchor,