Editor link components

* other minor fixes

packages/editor-ext/src/index.ts

@@ -8,3 +8,5 @@ export * from "./lib/image";
 export * from "./lib/video";
 export * from "./lib/callout";
 export * from "./lib/media-utils";
+export * from "./lib/link";
+export * from "./lib/selection";

packages/editor-ext/src/lib/link.ts

@@ -0,0 +1,47 @@
+import { mergeAttributes } from "@tiptap/core";
+import TiptapLink from "@tiptap/extension-link";
+import { Plugin } from "@tiptap/pm/state";
+import { EditorView } from "@tiptap/pm/view";
+
+export const LinkExtension = TiptapLink.extend({
+  inclusive: false,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "a",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        class: "link",
+      }),
+      0,
+    ];
+  },
+
+  addProseMirrorPlugins() {
+    const { editor } = this;
+
+    return [
+      ...(this.parent?.() || []),
+      new Plugin({
+        props: {
+          handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
+            const { selection } = editor.state;
+
+            if (event.key === "Escape" && selection.empty !== true) {
+              editor.commands.focus(selection.to, { scrollIntoView: false });
+            }
+
+            return false;
+          },
+        },
+      }),
+    ];
+  },
+});

packages/editor-ext/src/lib/selection.ts

@@ -0,0 +1,36 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+export const Selection = Extension.create({
+  name: "selection",
+
+  addProseMirrorPlugins() {
+    const { editor } = this;
+
+    return [
+      new Plugin({
+        key: new PluginKey("selection"),
+        props: {
+          decorations(state) {
+            if (state.selection.empty) {
+              return null;
+            }
+
+            if (editor.isFocused === true) {
+              return null;
+            }
+
+            return DecorationSet.create(state.doc, [
+              Decoration.inline(state.selection.from, state.selection.to, {
+                class: "selection",
+              }),
+            ]);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default Selection;