@squiz/formatted-text-editor 1.21.1-alpha.3 → 1.21.1-alpha.30

package/lib/Extensions/ImageExtension/ImageExtension.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageExtension = void 0;
+const extensions_1 = require("remirror/extensions");
+const core_1 = require("@remirror/core");
+/**
+ * Get the width and the height of the image.
+ */
+function getDimensions(element) {
+    let { width, height } = element.style;
+    width = width || element.getAttribute('width') || '';
+    height = height || element.getAttribute('height') || '';
+    return { width, height };
+}
+/**
+ * Retrieve attributes from the dom for the image extension.
+ */
+function getImageAttributes({ element, parse }) {
+    const { width, height } = getDimensions(element);
+    return {
+        ...parse(element),
+        alt: element.getAttribute('alt') ?? '',
+        height: Number.parseInt(height || '0', 10) || null,
+        src: element.getAttribute('src') ?? null,
+        title: element.getAttribute('title') ?? '',
+        width: Number.parseInt(width || '0', 10) || null,
+        fileName: element.getAttribute('data-file-name') ?? null,
+    };
+}
+class ImageExtension extends extensions_1.ImageExtension {
+    createPasteRules() {
+        return [
+            {
+                type: 'file',
+                regexp: /image/i,
+                fileHandler: () => {
+                    return false;
+                },
+            },
+        ];
+    }
+    createNodeSpec(extra, override) {
+        const { preferPastedTextContent } = this.options;
+        return {
+            inline: true,
+            draggable: true,
+            selectable: true,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                alt: { default: '' },
+                crop: { default: null },
+                height: { default: null },
+                width: { default: null },
+                rotate: { default: null },
+                src: { default: null },
+                title: { default: '' },
+                fileName: { default: null },
+                resizable: { default: false },
+            },
+            parseDOM: [
+                {
+                    tag: 'img[src]',
+                    getAttrs: (element) => {
+                        if ((0, core_1.isElementDomNode)(element)) {
+                            const attrs = getImageAttributes({ element, parse: extra.parse });
+                            if (preferPastedTextContent && attrs.src?.startsWith('file:///')) {
+                                return false;
+                            }
+                            return attrs;
+                        }
+                        return {};
+                    },
+                },
+                ...(override.parseDOM ?? []),
+            ],
+            toDOM: (node) => {
+                const attrs = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                return ['img', { ...extra.dom(node), ...attrs }];
+            },
+        };
+    }
+    insertImage(attributes, selection) {
+        return ({ tr, dispatch }) => {
+            const { from, to } = (0, core_1.getTextSelection)(selection ?? tr.selection, tr.doc);
+            const node = this.type.create(attributes);
+            dispatch?.(tr.replaceRangeWith(from, to, node));
+            return true;
+        };
+    }
+}
+exports.ImageExtension = ImageExtension;

package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts

@@ -0,0 +1,26 @@
+import { ApplySchemaAttributes, FromToProps, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
+import { CommandFunction, MarkExtension } from '@remirror/core';
+import { LinkTarget } from './common';
+export type AssetLinkAttributes = {
+    matrixAssetId: string;
+    matrixIdentifier: string;
+    matrixDomain: string;
+    target: LinkTarget;
+};
+export type AssetLinkOptions = {
+    matrixIdentifier?: string;
+    matrixDomain?: string;
+    defaultTarget?: LinkTarget;
+    supportedTargets?: LinkTarget[];
+};
+export type UpdateAssetLinkProps = {
+    text: string;
+    attrs: Partial<AssetLinkAttributes>;
+    range: FromToProps;
+};
+export declare class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
+    get name(): string;
+    createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
+    updateAssetLink({ text, attrs, range }: UpdateAssetLinkProps): CommandFunction;
+    removeAssetLink(): CommandFunction;
+}

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -0,0 +1,102 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetLinkExtension = void 0;
+const remirror_1 = require("remirror");
+const core_1 = require("@remirror/core");
+const common_1 = require("./common");
+const CommandsExtension_1 = require("../CommandsExtension/CommandsExtension");
+const Extensions_1 = require("../Extensions");
+let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
+    get name() {
+        return Extensions_1.MarkName.AssetLink;
+    }
+    createMarkSpec(extra, override) {
+        return {
+            inclusive: false,
+            excludes: 'link',
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                matrixAssetId: {},
+                matrixIdentifier: { default: this.options.matrixIdentifier },
+                matrixDomain: { default: this.options.matrixDomain },
+                target: { default: this.options.defaultTarget },
+            },
+            parseDOM: [
+                {
+                    tag: 'a[data-matrix-asset-id]',
+                    getAttrs: (node) => {
+                        if (!(0, remirror_1.isElementDomNode)(node)) {
+                            return false;
+                        }
+                        const matrixAssetId = node.getAttribute('data-matrix-asset-id');
+                        const matrixIdentifier = node.getAttribute('data-matrix-identifier');
+                        const matrixDomain = node.getAttribute('data-matrix-domain');
+                        if (!matrixAssetId || !matrixIdentifier || !matrixDomain) {
+                            return false;
+                        }
+                        return {
+                            ...extra.parse(node),
+                            matrixAssetId,
+                            matrixIdentifier,
+                            matrixDomain,
+                            target: (0, common_1.validateTarget)(node.getAttribute('target'), this.options.supportedTargets, this.options.defaultTarget),
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const { matrixAssetId, matrixIdentifier, matrixDomain, target, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const rel = 'noopener noreferrer nofollow';
+                const attrs = {
+                    ...extra.dom(node),
+                    ...rest,
+                    rel,
+                    // TODO: this won't be acceptable if/when we get to rendering outside of Matrix.
+                    href: `/?a=${matrixAssetId}`,
+                    target: (0, common_1.validateTarget)(target, this.options.supportedTargets, this.options.defaultTarget),
+                    'data-matrix-asset-id': matrixAssetId,
+                    'data-matrix-identifier': matrixIdentifier,
+                    'data-matrix-domain': matrixDomain,
+                };
+                return ['a', attrs, 0];
+            },
+        };
+    }
+    updateAssetLink({ text, attrs, range }) {
+        return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
+            attrs,
+            text,
+            range,
+            mark: this.type,
+            removeMark: !attrs.matrixAssetId,
+        });
+    }
+    removeAssetLink() {
+        return (0, core_1.removeMark)({ type: this.type });
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], AssetLinkExtension.prototype, "updateAssetLink", null);
+__decorate([
+    (0, core_1.command)()
+], AssetLinkExtension.prototype, "removeAssetLink", null);
+AssetLinkExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            matrixIdentifier: '',
+            matrixDomain: '',
+            defaultTarget: common_1.LinkTarget.Self,
+            supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],
+        },
+        defaultPriority: remirror_1.ExtensionPriority.High,
+    })
+], AssetLinkExtension);
+exports.AssetLinkExtension = AssetLinkExtension;

package/lib/Extensions/LinkExtension/LinkExtension.d.ts

@@ -1,16 +1,25 @@
-import { ApplySchemaAttributes, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
-import { KeyBindingProps } from '@remirror/core';
-import { CommandFunction } from '@remirror/pm';
-import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
-export type UpdateLinkOptions = LinkAttributes & {
-    text: string;
-};
-export type LinkAttributes = RemirrorLinkAttributes & {
+import { ApplySchemaAttributes, FromToProps, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
+import { CommandFunction, Handler, KeyBindingProps, MarkExtension } from '@remirror/core';
+import { LinkTarget } from './common';
+export type LinkAttributes = {
+    href: string;
     title?: string;
+    target: LinkTarget;
+};
+export type LinkOptions = {
+    defaultTarget?: LinkTarget;
+    supportedTargets?: LinkTarget[];
+    onShortcut?: Handler<() => void>;
+};
+export type UpdateLinkProps = {
+    text: string;
+    attrs: Partial<LinkAttributes>;
+    range: FromToProps;
 };
-export declare class LinkExtension extends RemirrorLinkExtension {
+export declare class LinkExtension extends MarkExtension<LinkOptions> {
+    get name(): string;
     createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
-    shortcut({ tr }: KeyBindingProps): boolean;
-    selectLink(): CommandFunction;
-    updateLink(options: UpdateLinkOptions): CommandFunction;
+    shortcut(_: KeyBindingProps): boolean;
+    updateLink({ text, attrs, range }: UpdateLinkProps): CommandFunction;
+    removeLink(): CommandFunction;
 }

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -1,18 +1,31 @@
 "use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkExtension = void 0;
 const remirror_1 = require("remirror");
 const core_1 = require("@remirror/core");
-const extensions_1 = require("remirror/extensions");
-class LinkExtension extends extensions_1.LinkExtension {
+const common_1 = require("./common");
+const CommandsExtension_1 = require("../CommandsExtension/CommandsExtension");
+const Extensions_1 = require("../Extensions");
+let LinkExtension = class LinkExtension extends core_1.MarkExtension {
+    get name() {
+        return Extensions_1.MarkName.Link;
+    }
     createMarkSpec(extra, override) {
-        const spec = super.createMarkSpec(extra, override);
         return {
-            ...spec,
-            excludes: undefined,
+            inclusive: false,
+            excludes: 'assetLink',
+            ...override,
             attrs: {
-                ...spec.attrs,
+                ...extra.defaults(),
+                href: {},
                 title: { default: undefined },
+                target: { default: this.options.defaultTarget },
             },
             parseDOM: [
                 {
@@ -23,75 +36,60 @@ class LinkExtension extends extensions_1.LinkExtension {
                         }
                         return {
                             ...extra.parse(node),
-                            auto: false,
                             href: node.getAttribute('href'),
-                            target: node.getAttribute('target'),
                             title: node.getAttribute('title'),
+                            target: (0, common_1.validateTarget)(node.getAttribute('target'), this.options.supportedTargets, this.options.defaultTarget),
                         };
                     },
                 },
             ],
+            toDOM: (node) => {
+                const { target, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const rel = 'noopener noreferrer nofollow';
+                const attrs = {
+                    ...extra.dom(node),
+                    ...rest,
+                    rel,
+                    target: (0, common_1.validateTarget)(target, this.options.supportedTargets, this.options.defaultTarget),
+                };
+                return ['a', attrs, 0];
+            },
         };
     }
-    shortcut({ tr }) {
-        // override parent implementation to allow a link to be inserted without requiring a text selection first.
-        const { from, to, $from } = tr.selection;
-        const mark = (0, core_1.getMarkRange)($from, this.type);
-        const selectedText = tr.doc.textBetween(from, to);
-        this.options.onShortcut({
-            activeLink: mark ? { attrs: mark.mark.attrs, from: mark.from, to: mark.to } : undefined,
-            selectedText,
-            from,
-            to,
-        });
+    shortcut(_) {
+        this.options.onShortcut();
         return true;
     }
-    selectLink() {
-        // parent implementation selects only the link text, this mimics closer to Google Docs where
-        // the select text is widened to include the link but retains non-link selected text as well.
-        return (props) => {
-            const { tr } = props;
-            const ranges = (0, remirror_1.getMarkRanges)(tr.selection, this.type);
-            if (ranges.length === 0) {
-                return false;
-            }
-            // work out the start position of the first link and end position of the last link in the selection.
-            const from = Math.min(tr.selection.from, ...ranges.map((range) => range.from));
-            const to = Math.max(tr.selection.to, ...ranges.map((range) => range.to));
-            // don't need to widen the selection, return early.
-            if (tr.selection.from === from && tr.selection.to === to) {
-                return false;
-            }
-            // widen the selection to make sure the full link is included.
-            this.store.commands.selectText.original({ from, to })(props);
-            return true;
-        };
+    updateLink({ text, attrs, range }) {
+        return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
+            attrs,
+            text,
+            range,
+            mark: this.type,
+            removeMark: !attrs.href,
+        });
     }
-    updateLink(options) {
-        const { text, ...attrs } = options;
-        return (props) => {
-            const { tr, dispatch, view } = props;
-            const range = { from: tr.selection.from, to: tr.selection.to };
-            const selectedText = tr.doc.textBetween(range.from, range.to);
-            if (text !== selectedText) {
-                // update the text in the editor if it was updated, update the range to cover the length of the new text.
-                tr.insertText(text);
-                range.to = range.from + text.length;
-            }
-            // apply the link, or remove it if no URL was provided.
-            if (attrs.href.length > 0) {
-                tr.addMark(range.from, range.to, this.type.create(attrs));
-            }
-            else {
-                tr.removeMark(range.from, range.to, this.type);
-            }
-            // move the cursor to the end of the link and re-focus the editor.
-            tr.setSelection((0, core_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc));
-            // apply the transaction.
-            dispatch?.(tr);
-            view?.focus();
-            return true;
-        };
+    removeLink() {
+        return (0, core_1.removeMark)({ type: this.type });
     }
-}
+};
+__decorate([
+    (0, core_1.keyBinding)({ shortcut: core_1.NamedShortcut.InsertLink })
+], LinkExtension.prototype, "shortcut", null);
+__decorate([
+    (0, core_1.command)()
+], LinkExtension.prototype, "updateLink", null);
+__decorate([
+    (0, core_1.command)()
+], LinkExtension.prototype, "removeLink", null);
+LinkExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            defaultTarget: common_1.LinkTarget.Self,
+            supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],
+        },
+        handlerKeys: ['onShortcut'],
+        defaultPriority: remirror_1.ExtensionPriority.Medium,
+    })
+], LinkExtension);
 exports.LinkExtension = LinkExtension;

package/lib/Extensions/LinkExtension/common.d.ts

@@ -0,0 +1,7 @@
+export declare enum LinkTarget {
+    Self = "_self",
+    Blank = "_blank",
+    Parent = "_parent",
+    Top = "_top"
+}
+export declare const validateTarget: (target: unknown, supportedTargets: LinkTarget[], defaultTarget: LinkTarget) => LinkTarget;

package/lib/Extensions/LinkExtension/common.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateTarget = exports.LinkTarget = void 0;
+var LinkTarget;
+(function (LinkTarget) {
+    LinkTarget["Self"] = "_self";
+    LinkTarget["Blank"] = "_blank";
+    LinkTarget["Parent"] = "_parent";
+    LinkTarget["Top"] = "_top";
+})(LinkTarget = exports.LinkTarget || (exports.LinkTarget = {}));
+const validateTarget = (target, supportedTargets, defaultTarget) => {
+    return supportedTargets.includes(target) ? target : defaultTarget;
+};
+exports.validateTarget = validateTarget;

package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts

@@ -1,7 +1,7 @@
 import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
 export declare class PreformattedExtension extends NodeExtension {
     get name(): "preformatted";
-    createTags(): ("formattingNode" | "block" | "textBlock")[];
+    createTags(): ("block" | "formattingNode" | "textBlock")[];
     createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
     /**
      * Toggle the <pre> for the current block.

package/lib/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useExtensionNames';
+export * from './useExpandedSelection';

package/lib/hooks/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useExtensionNames"), exports);
+__exportStar(require("./useExpandedSelection"), exports);

package/lib/hooks/useExpandedSelection.d.ts

@@ -0,0 +1,23 @@
+import { Selection } from '@remirror/core';
+import { Mark, MarkType } from 'remirror';
+export type ExpandedSelection = {
+    selection: Selection;
+    marks: Mark[];
+};
+/**
+ * Returns a single range that is either:
+ * 1. The current selection if the current selection does not contain any of the indicated marks.
+ * 2. An expanded version of the current selection if the range contains any of the indicated marks.
+ *
+ * For example, given the content:
+ *
+ * <strong>Bold</strong> regular <u>underline</u> <u>more underline</u>
+ *
+ * If the marks passed in are 'bold' and 'underline' and the text "old regular under" is selected
+ * the returned range will be "Bold regular underline".
+ *
+ * @param {(MarkType|string)[]} markTypes
+ *
+ * @return {ExpandedSelection}
+ */
+export declare const useExpandedSelection: (markTypes: (MarkType | string)[]) => ExpandedSelection;

package/lib/hooks/useExpandedSelection.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandedSelection = void 0;
+const remirror_1 = require("remirror");
+const react_1 = require("@remirror/react");
+/**
+ * Returns a single range that is either:
+ * 1. The current selection if the current selection does not contain any of the indicated marks.
+ * 2. An expanded version of the current selection if the range contains any of the indicated marks.
+ *
+ * For example, given the content:
+ *
+ * <strong>Bold</strong> regular <u>underline</u> <u>more underline</u>
+ *
+ * If the marks passed in are 'bold' and 'underline' and the text "old regular under" is selected
+ * the returned range will be "Bold regular underline".
+ *
+ * @param {(MarkType|string)[]} markTypes
+ *
+ * @return {ExpandedSelection}
+ */
+const useExpandedSelection = (markTypes) => {
+    const { doc, selection } = (0, react_1.useEditorState)();
+    const ranges = [];
+    markTypes.forEach((markType) => {
+        ranges.push(...(0, remirror_1.getMarkRanges)(selection, markType));
+    });
+    if (ranges.length === 0) {
+        return { selection, marks: [] };
+    }
+    // work out the start position of the first link and end position of the last link in the selection.
+    const from = Math.min(selection.from, ...ranges.map((range) => range.from));
+    const to = Math.max(selection.to, ...ranges.map((range) => range.to));
+    const marks = ranges.map((range) => range.mark);
+    return { selection: (0, remirror_1.getTextSelection)({ from, to }, doc), marks };
+};
+exports.useExpandedSelection = useExpandedSelection;