@edifice.io/tiptap-extensions 1.5.16-develop-rc.2

package/src/hyperlink/hyperlink.ts

@@ -0,0 +1,92 @@
+import { Link } from '@tiptap/extension-link';
+
+/** Our own model of an hyperlink in a rich document. */
+export type HyperlinkAttributes = {
+  href: string | null;
+  target: '_blank' | null;
+  title: string | null;
+  text: string | null;
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    hyperlink: {
+      /**
+       * Set an hyperlink mark
+       */
+      setLink: (attributes: Partial<HyperlinkAttributes>) => ReturnType;
+      /**
+       * Toggle an hyperlink mark
+       */
+      toggleLink: (attributes: {
+        href: string;
+        target?: string | null;
+      }) => ReturnType;
+      /**
+       * Unset an hyperlink mark
+       */
+      unsetLink: () => ReturnType;
+    };
+  }
+}
+
+/**
+ * Hyperlink (external links), extends `Link` extension from TipTap.
+ *
+ * Links to external resources MUST NOT have a `data-id` nor a `data-app-prefix` attribute.
+ * The `target` attribute has to be sanitized, so it is overriden.
+ */
+export const Hyperlink = Link.extend({
+  name: 'hyperlink',
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a[href]:not([href *= "javascript:" i])',
+        // Be sure no data-id and data-app-prefix attribute exists :
+        // it would then be an Linker, not an Hyperlink !
+        getAttrs: (node: HTMLAnchorElement) => {
+          // See https://prosemirror.net/docs/ref/version/0.18.0.html#model.ParseRule.getAttrs
+          if (
+            node.getAttribute('data-id') &&
+            node.getAttribute('data-app-prefix')
+          )
+            return false;
+        },
+      },
+    ];
+  },
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      openOnClick: false,
+      HTMLAttributes: {
+        ...this.parent?.().HTMLAttributes,
+        target: null,
+      },
+    };
+  },
+
+  /* Manage `title` and `target` attributes. */
+  addAttributes() {
+    return {
+      // Preserve attributes of parent extension...
+      ...this.parent?.(),
+      // ...then add or override the following :
+      //------------------
+      target: {
+        default: this.options.HTMLAttributes.target,
+        // Sanitize target value
+        parseHTML: (element) =>
+          element.getAttribute('target') !== '_blank' ? null : '_blank',
+        renderHTML: (attributes) => ({
+          target: attributes['target'],
+        }),
+      },
+      title: {
+        default: this.options.HTMLAttributes.title,
+      },
+    };
+  },
+});

package/src/hyperlink/index.ts

@@ -0,0 +1,5 @@
+import { Hyperlink } from './hyperlink';
+
+export * from './hyperlink';
+
+export default Hyperlink;

package/src/iframe/iframe.ts

@@ -0,0 +1,112 @@
+import { Node } from '@tiptap/core';
+
+export interface IframeOptions {
+  allowFullscreen: boolean;
+  HTMLAttributes: {
+    [key: string]: any;
+  };
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    iframe: {
+      /**
+       * Add an iframe
+       */
+      setIframe: (options: { src: string }) => ReturnType;
+    };
+  }
+}
+
+export const Iframe = Node.create<IframeOptions>({
+  name: 'iframe',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addOptions() {
+    return {
+      allowFullscreen: true,
+      HTMLAttributes: {
+        class: 'iframe-wrapper',
+      },
+    };
+  },
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      frameborder: {
+        default: 0,
+      },
+      allowfullscreen: {
+        default: this.options.allowFullscreen,
+        parseHTML: () => this.options.allowFullscreen,
+      },
+      width: {
+        renderHTML: (attributes) => {
+          return attributes.width
+            ? {
+                width:
+                  attributes.width === '100%'
+                    ? '100%'
+                    : parseInt(attributes.width),
+              }
+            : {};
+        },
+        parseHTML: (element) => element.getAttribute('width'),
+      },
+      height: {
+        renderHTML: (attributes) => {
+          return attributes.height
+            ? {
+                height: parseInt(attributes.height),
+              }
+            : {};
+        },
+        parseHTML: (element) => element.getAttribute('height'),
+      },
+      style: {
+        renderHTML: (attributes) => {
+          return attributes.style
+            ? {
+                style: attributes.style,
+              }
+            : {};
+        },
+        parseHTML: (element) => element.getAttribute('style'),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'iframe',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', this.options.HTMLAttributes, ['iframe', HTMLAttributes]];
+  },
+
+  addCommands() {
+    return {
+      setIframe:
+        (options: { src: string }) =>
+        ({ tr, dispatch }) => {
+          const { selection } = tr;
+          const node = this.type.create(options);
+
+          if (dispatch) {
+            tr.replaceRangeWith(selection.from, selection.to, node);
+          }
+
+          return true;
+        },
+    };
+  },
+});

package/src/iframe/index.ts

@@ -0,0 +1,5 @@
+import { Iframe } from './iframe';
+
+export * from './iframe';
+
+export default Iframe;

package/src/image/custom-image.ts

@@ -0,0 +1,226 @@
+import { mergeAttributes, nodeInputRule } from '@tiptap/core';
+import Image from '@tiptap/extension-image';
+
+export const IMAGE_INPUT_REGEX =
+  /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+
+export interface CustomImageOptions {
+  HTMLAttributes: Record<string, string>;
+  sizes: string[];
+}
+
+interface AttributesProps {
+  width: number | string;
+  height: number | string;
+  size: string;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    customImage: {
+      setAttributes: (options: AttributesProps) => ReturnType;
+      setNewImage: (options: {
+        src: string;
+        alt?: string;
+        title?: string;
+      }) => ReturnType;
+    };
+  }
+}
+
+export const CustomImage = Image.extend<CustomImageOptions>({
+  name: 'custom-image',
+  draggable: true,
+  selectable: true,
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      inline: true,
+      content: 'inline*',
+      sizes: ['small', 'medium', 'large'],
+      HTMLAttributes: {
+        class: 'custom-image',
+      },
+    };
+  },
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      size: {
+        default: 'medium',
+        rendered: false,
+      },
+      alt: {
+        renderHTML: (attributes) => {
+          return {
+            alt: attributes.alt,
+          };
+        },
+        parseHTML: (element) => element.getAttribute('alt'),
+      },
+      title: {
+        renderHTML: (attributes) => {
+          return {
+            title: attributes.title,
+          };
+        },
+        parseHTML: (element) => element.getAttribute('title'),
+      },
+      width: {
+        default: '350',
+        renderHTML: (attributes) => {
+          if (
+            attributes.width !== null &&
+            attributes.width !== undefined &&
+            !Number.isNaN(attributes.width)
+          ) {
+            return {
+              width: parseInt(attributes.width),
+            };
+          }
+          return {};
+        },
+        parseHTML: (element) => element.getAttribute('width'),
+      },
+      height: {
+        renderHTML: (attributes) => {
+          if (
+            attributes.height !== null &&
+            attributes.height !== undefined &&
+            !Number.isNaN(attributes.height)
+          ) {
+            return {
+              height: parseInt(attributes.height),
+            };
+          }
+          return {};
+        },
+        parseHTML: (element) => element.getAttribute('height'),
+      },
+      style: {
+        renderHTML: (attributes) => {
+          return attributes.style
+            ? {
+                style: attributes.style,
+              }
+            : {};
+        },
+        parseHTML: (element) => {
+          const style = element.getAttribute('style');
+          return style && typeof style === 'string' && style.length > 0
+            ? {}
+            : null;
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'img[src]:not([src^="data:"])',
+        getAttrs: (el: HTMLImageElement) => {
+          const attr = { src: el.getAttribute('src') };
+          // Check old content format and get the width from the parent element
+          if (el.parentElement?.className.includes('image-container')) {
+            if (el.parentElement.style?.width) {
+              attr['width'] = el.parentElement.style.width;
+            }
+          }
+          if (el.style?.width) {
+            attr['width'] = el.style.width;
+          }
+
+          // Check old content smiley
+          const oldSmileyList = [
+            'happy',
+            'proud',
+            'dreamy',
+            'love',
+            'tired',
+            'angry',
+            'worried',
+            'sick',
+            'joker',
+            'sad',
+          ];
+          if (
+            oldSmileyList.filter((smiley) => attr.src.includes(smiley + '.png'))
+              .length > 0
+          ) {
+            attr['style'] = {
+              width: '1.5em',
+              height: '1.5em',
+              fontSize: el.parentElement?.style?.fontSize,
+            };
+            attr['width'] = 'null';
+            attr['height'] = 'null';
+          }
+          return attr;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'img',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+    ];
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: IMAGE_INPUT_REGEX,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, , alt, src, title] = match;
+
+          return {
+            src,
+            alt,
+            title,
+          };
+        },
+      }),
+    ];
+  },
+
+  addCommands() {
+    return {
+      setNewImage:
+        (attrs) =>
+        ({ tr, dispatch }) => {
+          const { selection } = tr;
+          const node = this.type.create(attrs);
+
+          if (dispatch) {
+            tr.replaceRangeWith(selection.from, selection.to, node);
+          }
+
+          return true;
+        },
+      setAttributes:
+        (attributes) =>
+        ({ tr, dispatch }) => {
+          const { selection } = tr;
+
+          const nodeAttrs = tr.doc.nodeAt(tr.selection.from);
+          const options = {
+            ...nodeAttrs.attrs,
+            ...attributes,
+          };
+          const node = this.type.create(options);
+
+          if (dispatch) {
+            tr.replaceRangeWith(selection.from, selection.to, node);
+          }
+
+          return true;
+        },
+    };
+  },
+});

package/src/image/index.ts

@@ -0,0 +1,5 @@
+import { CustomImage } from './custom-image';
+
+export * from './custom-image';
+
+export default CustomImage;

package/src/index.ts

@@ -0,0 +1,19 @@
+export * from './abbr';
+export * from './alert';
+export * from './attachment';
+export * from './audio';
+export * from './font-size';
+export * from './heading';
+export * from './highlight';
+export * from './hyperlink';
+export * from './iframe';
+export * from './image';
+export * from './line-height';
+export * from './linker';
+export * from './mathjax';
+export * from './paragraph';
+export * from './speech-recognition';
+export * from './speech-synthesis';
+export * from './table-cell';
+export * from './transform';
+export * from './video';

package/src/line-height/index.ts

@@ -0,0 +1,5 @@
+import { LineHeight } from './line-height';
+
+export * from './line-height';
+
+export default LineHeight;

package/src/line-height/line-height.ts

@@ -0,0 +1,37 @@
+import '@tiptap/extension-text-style';
+
+import { Extension } from '@tiptap/core';
+
+export const LineHeight = Extension.create({
+  name: 'lineHeight',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (element) =>
+              element.style.lineHeight?.replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.lineHeight) {
+                return {};
+              }
+
+              return {
+                style: `line-height: ${attributes.lineHeight}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+});

package/src/linker/index.ts

@@ -0,0 +1,5 @@
+import { Linker } from './linker';
+
+export * from './linker';
+
+export default Linker;

package/src/linker/linker.ts

@@ -0,0 +1,153 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { NodeSelection } from '@tiptap/pm/state';
+
+/* Our own model of a link in a rich document. */
+export type LinkerAttributes = {
+  href: string | null;
+  target: '_blank' | null;
+  title: string | null;
+  'data-id': string | null;
+  'data-app-prefix': string | null;
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    linker: {
+      /**
+       * Set a linker node
+       */
+      setLinker: (attributes: LinkerAttributes) => ReturnType;
+      /**
+       * Unset a linker node
+       */
+      unsetLinker: () => ReturnType;
+    };
+  }
+}
+
+/**
+ * Internal links extension.
+ * Reproduces the legacy angularJs "linker" directive.
+ *
+ * Links to internal resources MAY have a `title` and MUST HAVE `data-id` and `data-app-prefix` attributes :
+ * `<a href="/blog#/view/35fa4198-blog_id/5e654c71-article_id" data-app-prefix="blog" data-id="35fa4198-blog_id" target="_blank" title="Voir ce billet de blog" class="ng-scope">/blog#/view/35fa4198-57fe-45eb-94f4-a5e4defff305/5e654c71-1e61-4f84-86dc-6fcfaf33f513</a>`
+ */
+export const Linker = Node.create({
+  name: 'linker',
+  content: 'text*',
+  marks: '',
+  group: 'inline',
+
+  inline: true,
+  selectable: true,
+  atom: true,
+  draggable: true,
+  isolating: true,
+  allowGapCursor: false,
+
+  priority: 1100,
+  keepOnSplit: false,
+
+  addOptions() {
+    return {
+      openOnClick: true,
+      HTMLAttributes: {
+        target: null,
+        title: null,
+        class: null,
+        'data-id': null,
+        'data-app-prefix': null,
+      },
+      validate: undefined,
+    };
+  },
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+      },
+      class: {
+        default: this.options.HTMLAttributes.class,
+      },
+      target: {
+        default: this.options.HTMLAttributes.target,
+        // Sanitize target value
+        parseHTML: (element) =>
+          element.getAttribute('target') !== '_blank' ? null : '_blank',
+      },
+      title: {
+        default: this.options.HTMLAttributes.title,
+      },
+      'data-id': {
+        default: this.options.HTMLAttributes['data-id'],
+      },
+      'data-app-prefix': {
+        default: this.options.HTMLAttributes['data-app-prefix'],
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a[href]:not([href *= "javascript:" i])[data-id][data-app-prefix]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    if (HTMLAttributes.href?.startsWith('javascript:')) {
+      return [
+        'a',
+        mergeAttributes(this.options.HTMLAttributes, {
+          ...HTMLAttributes,
+          href: '',
+        }),
+        0,
+      ];
+    }
+    return [
+      'a',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      setLinker:
+        (attrs) =>
+        ({ commands }) => {
+          // Insert a Linker node with inner text node
+          commands.insertContent({
+            type: this.name,
+            attrs,
+            content: [
+              {
+                type: 'text',
+                text: attrs.title,
+              },
+            ],
+          });
+          return true;
+        },
+
+      unsetLinker:
+        () =>
+        ({ state, tr }) => {
+          // Which Linker node is actually selected ?
+          const { node, from, to } = state.selection as NodeSelection;
+          // Delete any selected Linker node
+          if (node?.type.name === 'linker') {
+            /* The following does not work as one would expected.
+            commands.deleteNode(this.name);
+            commands.deleteCurrentNode();
+            * Replaced by : */
+            tr.delete(from, to).scrollIntoView();
+          }
+          return true;
+        },
+    };
+  },
+});

package/src/mathjax/index.ts

@@ -0,0 +1,5 @@
+import { MathJax } from './mathjax';
+
+export * from './mathjax';
+
+export default MathJax;