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

package/package.json

@@ -0,0 +1,133 @@
+{
+  "name": "@edifice.io/tiptap-extensions",
+  "version": "1.5.16-develop-rc.2",
+  "description": "Edifice Rich Text Editor Extensions",
+  "homepage": "https://github.com/edificeio/edifice-ui/tree/main/packages/tiptap/extensions#readme",
+  "bugs": {
+    "url": "https://github.com/edificeio/edifice-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/edificeio/edifice-ui.git"
+  },
+  "license": "AGPL-3.0",
+  "author": "Edifice",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./abbr": {
+      "import": "./dist/abbr/abbr.js",
+      "require": "./dist/abbr/abbr.cjs"
+    },
+    "./alert": {
+      "import": "./dist/alert/alert.js",
+      "require": "./dist/alert/alert.cjs"
+    },
+    "./attachment": {
+      "import": "./dist/attachment/attachment.js",
+      "require": "./dist/attachment/attachment.cjs"
+    },
+    "./audio": {
+      "import": "./dist/audio/audio.js",
+      "require": "./dist/audio/audio.cjs"
+    },
+    "./font-size": {
+      "import": "./dist/font-size/font-size.js",
+      "require": "./dist/font-size/font-size.cjs"
+    },
+    "./heading": {
+      "import": "./dist/heading/heading.js",
+      "require": "./dist/heading/heading.cjs"
+    },
+    "./highlight": {
+      "import": "./dist/highlight/highlight.js",
+      "require": "./dist/highlight/highlight.cjs"
+    },
+    "./hyperlink": {
+      "import": "./dist/hyperlink/hyperlink.js",
+      "require": "./dist/hyperlink/hyperlink.cjs"
+    },
+    "./iframe": {
+      "import": "./dist/iframe/iframe.js",
+      "require": "./dist/iframe/iframe.cjs"
+    },
+    "./image": {
+      "import": "./dist/image/image.js",
+      "require": "./dist/image/image.cjs"
+    },
+    "./line-height": {
+      "import": "./dist/line-height/line-height.js",
+      "require": "./dist/line-height/line-height.cjs"
+    },
+    "./linker": {
+      "import": "./dist/linker/linker.js",
+      "require": "./dist/linker/linker.cjs"
+    },
+    "./mathjax": {
+      "import": "./dist/mathjax/mathjax.js",
+      "require": "./dist/mathjax/mathjax.cjs"
+    },
+    "./paragraph": {
+      "import": "./dist/paragraph/paragraph.js",
+      "require": "./dist/paragraph/paragraph.cjs"
+    },
+    "./speech-recognition": {
+      "import": "./dist/speech-recognition/speech-recognition.js",
+      "require": "./dist/speech-recognition/speech-recognition.cjs"
+    },
+    "./speech-synthesis": {
+      "import": "./dist/speech-synthesis/speech-synthesis.js",
+      "require": "./dist/speech-synthesis/speech-synthesis.cjs"
+    },
+    "./table-cell": {
+      "import": "./dist/table-cell/table-cell.js",
+      "require": "./dist/table-cell/table-cell.cjs"
+    },
+    "./transform": {
+      "import": "./dist/transform/transform.js",
+      "require": "./dist/transform/transform.cjs"
+    },
+    "./video": {
+      "import": "./dist/video/video.js",
+      "require": "./dist/video/video.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "fix": "eslint . --ext ts --report-unused-disable-directives --max-warnings 0",
+    "format": "pnpm run format:write && pnpm run format:check",
+    "format:check": "npx prettier --check .",
+    "format:write": "npx prettier --write .",
+    "lint": "eslint \"**/*.ts\""
+  },
+  "dependencies": {
+    "@tiptap/core": "2.3.0",
+    "@tiptap/extension-bold": "2.3.0",
+    "@tiptap/extension-document": "2.3.0",
+    "@tiptap/extension-heading": "2.3.0",
+    "@tiptap/extension-highlight": "2.3.0",
+    "@tiptap/extension-image": "2.3.0",
+    "@tiptap/extension-link": "2.3.0",
+    "@tiptap/extension-paragraph": "2.3.0",
+    "@tiptap/extension-table-cell": "2.3.0",
+    "@tiptap/extension-text": "2.3.0",
+    "@tiptap/extension-text-style": "2.3.0",
+    "@tiptap/html": "2.3.0",
+    "@tiptap/pm": "2.3.0",
+    "@tiptap/starter-kit": "2.3.0"
+  },
+  "devDependencies": {
+    "@types/dom-speech-recognition": "^0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "31c5ddef7d29e860f5f034b13cdd62ff2899f730"
+}

package/src/abbr/abbr.ts

@@ -0,0 +1,57 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    abbr: {
+      /**
+       * Set an abbr mark
+       */
+      setAbbr: (src: string) => ReturnType;
+      /**
+       * Toggle an abbr mark
+       */
+      toggleAbbr: (src: string) => ReturnType;
+    };
+  }
+}
+
+export const Abbr = Mark.create({
+  name: 'abbr',
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'abbr',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'abbr',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      setAbbr:
+        () =>
+        ({ commands }) => {
+          return commands.setMark(this.name);
+        },
+      toggleAbbr:
+        () =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name);
+        },
+    };
+  },
+});

package/src/abbr/index.ts

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

package/src/alert/alert.ts

@@ -0,0 +1,46 @@
+import { Node } from '@tiptap/core';
+
+export const Alert = Node.create({
+  name: 'alert',
+  content: 'inline+',
+  marks: '',
+  group: 'block',
+
+  inline: false,
+  selectable: true,
+  draggable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'p.info',
+        priority: 60,
+      },
+      {
+        tag: 'p.warning',
+        priority: 60,
+      },
+      {
+        tag: 'div.info',
+        priority: 60,
+      },
+      {
+        tag: 'div.warning',
+        priority: 60,
+      },
+    ];
+  },
+  addAttributes() {
+    return {
+      class: {
+        default: 'info',
+        parseHTML: (element) => {
+          return element.getAttribute('class');
+        },
+      },
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['div', HTMLAttributes, 0];
+  },
+});

package/src/alert/index.ts

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

package/src/attachment/attachment.ts

@@ -0,0 +1,113 @@
+import { Node } from '@tiptap/core';
+
+export interface AttachmentOptions {
+  HTMLAttributes: Record<string, string>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    attachment: {
+      setAttachment: (attachment) => ReturnType;
+    };
+  }
+}
+
+export const Attachment = Node.create<AttachmentOptions>({
+  name: 'attachments',
+  content: '',
+  marks: '',
+  group: 'block',
+  selectable: true,
+  atom: true,
+  draggable: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: 'attachments',
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[class=attachments]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const links = HTMLAttributes.links;
+
+    const renderedLinks = links.map((el) => {
+      return [
+        'a',
+        {
+          name: el.name,
+          href: el.href,
+          documentId: el.documentId,
+          dataContentType: el.dataContentType,
+        },
+        el.name,
+      ];
+    });
+
+    return ['div', this.options.HTMLAttributes, ...renderedLinks];
+  },
+
+  addAttributes() {
+    return {
+      links: {
+        default: [],
+        parseHTML: (element) => {
+          const links = element.getElementsByTagName('a');
+          const parsedLinks = [];
+
+          for (let i = 0; i < links.length; i++) {
+            const link = links[i];
+            const href = link.getAttribute('href');
+            const name = link.textContent;
+            const regexResult = href.match(/([^/]+$)/);
+            const documentId =
+              link.getAttribute('data-document-id') ||
+              (regexResult && regexResult[0]);
+            const dataContentType = link.getAttribute('data-content-type');
+
+            parsedLinks.push({
+              href,
+              name,
+              documentId,
+              dataContentType,
+            });
+          }
+
+          return parsedLinks;
+        },
+        renderHTML: (attributes) => {
+          return {
+            links: attributes.links.map((link) => ({
+              href: link.href,
+              name: link.name,
+              documentId: link.documentId,
+              dataContentType: link.dataContentType,
+            })),
+          };
+        },
+      },
+    };
+  },
+
+  addCommands() {
+    return {
+      setAttachment:
+        (
+          attrs = {
+            dataContentType: '',
+            name: '',
+            documentId: '',
+            href: '',
+          },
+        ) =>
+        ({ chain }) => {
+          return chain().insertContent({ type: this.name, attrs }).run();
+        },
+    };
+  },
+});

package/src/attachment/index.ts

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

package/src/audio/audio.ts

@@ -0,0 +1,81 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+
+export interface AudioOptions {
+  url: string;
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    audio: {
+      /**
+       * Set a audio node
+       * @param options.updateSelection set to true will select the newly inserted content
+       */
+      setAudio: (
+        id: string,
+        src: string,
+        options?: { updateSelection: boolean },
+      ) => ReturnType;
+    };
+  }
+}
+
+export const Audio = Node.create({
+  name: 'audio',
+
+  group: 'block',
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        parseHTML: (el: any) => (el as HTMLSpanElement).getAttribute('src'),
+        renderHTML: (attrs: any) => ({ src: attrs.src }),
+      },
+      documentId: {
+        default: '',
+        renderHTML: (attributes: any) => {
+          return { 'data-document-id': attributes.documentId };
+        },
+        parseHTML: (element: any) => element.getAttribute('data-document-id'),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.audio-wrapper>audio,audio',
+        getAttrs: (el: any) => ({
+          src: (el as HTMLAudioElement).getAttribute('src'),
+        }),
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      { class: 'audio-wrapper' },
+      ['audio', mergeAttributes(HTMLAttributes)],
+    ];
+  },
+
+  addCommands() {
+    return {
+      setAudio:
+        (id, src, options) =>
+        ({ commands, state }) => {
+          return commands.insertContentAt(
+            state.selection,
+            `<audio 
+              src="${src}" 
+              controls preload="none"
+              data-document-id="${id}"></audio>`,
+            options,
+          );
+        },
+    };
+  },
+});

package/src/audio/index.ts

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

package/src/font-size/font-size.ts

@@ -0,0 +1,74 @@
+import '@tiptap/extension-text-style';
+
+import { Extension } from '@tiptap/core';
+
+export type FontSizeOptions = {
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontSize: {
+      /**
+       * Set the font size
+       */
+      setFontSize: (fontSize: string) => ReturnType;
+      /**
+       * Unset the font size
+       */
+      unsetFontSize: () => ReturnType;
+    };
+  }
+}
+
+export const FontSize = Extension.create<FontSizeOptions>({
+  name: 'fontSize',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) =>
+              element.style.fontSize?.replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+
+              return {
+                style: `font-size: ${attributes.fontSize}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontSize:
+        (fontSize) =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { fontSize }).run();
+        },
+      unsetFontSize:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark('textStyle', { fontSize: null })
+            .removeEmptyTextStyle()
+            .run();
+        },
+    };
+  },
+});

package/src/font-size/index.ts

@@ -0,0 +1,5 @@
+import { FontSize } from './font-size';
+
+export * from './font-size';
+
+export default FontSize;

package/src/heading/heading.ts

@@ -0,0 +1,90 @@
+import { mergeAttributes } from '@tiptap/core';
+import { Heading } from '@tiptap/extension-heading';
+import '@tiptap/extension-text-style';
+
+export declare type Level = 1 | 2;
+
+interface Options {
+  levels: Level[];
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    customHeading: {
+      /**
+       * Apply Heading Level
+       */
+      setCustomHeading: (attributes: { level: Level }) => ReturnType;
+    };
+  }
+}
+
+export const CustomHeading = Heading.extend<Options>({
+  name: 'customHeading',
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      HTMLAttributes: {},
+    };
+  },
+
+  parseHTML() {
+    return this.options.levels.map((level: Level) => ({
+      tag: `h${level}`,
+      attrs: { level },
+    }));
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const hasLevel = this.options.levels.includes(node.attrs.level);
+    const level = hasLevel ? node.attrs.level : this.options.levels[0];
+
+    return [
+      `h${level}`,
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      setCustomHeading:
+        (attributes) =>
+        ({ tr, dispatch, commands }) => {
+          if (!this.options.levels.includes(attributes.level)) {
+            return false;
+          }
+
+          const { selection } = tr;
+          const { from, to } = selection;
+
+          tr.doc.nodesBetween(from, to, (node, pos) => {
+            if (node.isBlock && from >= pos && to <= pos + node.nodeSize) {
+              /* get node content and iterate through */
+              node.content.forEach((content) => {
+                /* get content marks and iterate through */
+                content.marks.forEach((mark) => {
+                  /* find textStyle mark and if has fontSize attrs */
+                  if (
+                    mark.type.name === 'textStyle' &&
+                    mark.attrs['fontSize'] &&
+                    mark.attrs['fontSize'] !== null
+                  ) {
+                    /* remove any fontSize attr to reset heading style */
+                    tr = tr.removeMark(pos, pos + node.nodeSize, mark.type);
+                  }
+                });
+              });
+            }
+          });
+
+          if (dispatch) {
+            dispatch(tr);
+          }
+          return commands.setHeading({ level: attributes.level });
+        },
+    };
+  },
+});

package/src/heading/index.ts

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

package/src/highlight/highlight.ts

@@ -0,0 +1,27 @@
+import Highlight from '@tiptap/extension-highlight';
+
+export const CustomHighlight = Highlight.extend({
+  name: 'customHighlight',
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      multicolor: true,
+      HTMLAttributes: {},
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        ...this.parent?.(),
+        style: 'background-color',
+        getAttrs: (style) => {
+          return {
+            color: style,
+          };
+        },
+      },
+    ];
+  },
+});

package/src/highlight/index.ts

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