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

package/src/mathjax/mathjax.ts

@@ -0,0 +1,55 @@
+import { Node } from '@tiptap/core';
+
+export const MathJax = Node.create({
+  name: 'mathjaxnode',
+  group: 'inline',
+  inline: true,
+  atom: false,
+  selectable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'mathjax',
+      },
+    ];
+  },
+
+  addAttributes() {
+    return {
+      equation: {
+        default: null,
+        parseHTML: (element: any) => {
+          const children = [...element.childNodes];
+          const textNodes = children.filter((child) => child.nodeType === 3);
+          return textNodes.length > 0
+            ? textNodes[textNodes.length - 1].nodeValue
+            : null;
+        },
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    let equation = (HTMLAttributes.equation || '')
+      // Get what is between \begin{equation}{... ...}\end{equation}
+      // Or between  \begin{equation}... ...\end{equation} without enclosing brackets
+      .replaceAll(
+        /(?:\\)?begin{equation}\s*\n?\s*{(.+?)}\n?\s*?(?:\\)?end{equation}/gm,
+        '$$$1$$',
+      )
+      .replaceAll(
+        /(?:\\)?begin{equation}\s*\n?\s*(.+?)\n?\s*?(?:\\)?end{equation}/gm,
+        '$$$1$$',
+      );
+    if (equation.length > 0) {
+      if (equation.charAt(0) !== '$') {
+        equation = `$${equation}`;
+      }
+      if (equation.charAt(equation.length - 1) !== '$') {
+        equation = `${equation}$`;
+      }
+    }
+    return ['span', {}, equation];
+  },
+});

package/src/paragraph/index.ts

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

package/src/paragraph/paragraph.ts

@@ -0,0 +1,25 @@
+import { Paragraph as TiptapParagraph } from '@tiptap/extension-paragraph';
+
+/**
+ * Extends `Paragraph` extension from TipTap.
+ *
+ * This extension is used to parse documents in old-format (version 0),
+ * where text alignments were applied on a <div> wrapping a <span>.
+ * The new format is a <p> with style attributes.
+ *
+ * For example :
+ * `<div style="text-align: right;"><span style="font-size: 20pt;">A right-aligned text</span></div>`
+ * is now parsed and rendered as
+ * `<p style="text-align: right;"><span style="font-size: 20pt;">A right-aligned text</span></p>`
+ */
+export const Paragraph = TiptapParagraph.extend({
+  parseHTML() {
+    const parentRules = this.parent?.() ?? [];
+    return [
+      ...parentRules,
+      {
+        tag: 'div[style]:has(> span)',
+      },
+    ];
+  },
+});

package/src/speech-recognition/index.ts

@@ -0,0 +1,5 @@
+import { SpeechRecognition } from './speech-recognition';
+
+export * from './speech-recognition';
+
+export default SpeechRecognition;

package/src/speech-recognition/speech-recognition.ts

@@ -0,0 +1,123 @@
+import { Node } from '@tiptap/core';
+
+export interface SpeechRecognitionOptions {
+  lang: string;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    SpeechRecognition: {
+      startSpeechRecognition: () => ReturnType;
+      stopSpeechRecognition: () => ReturnType;
+      isSpeechRecognitionStarted: () => boolean;
+    };
+  }
+}
+
+class SR_Node<O = any, S = any> extends Node<O, S> {
+  protected constructor() {
+    super();
+  }
+
+  recognition: SpeechRecognition | undefined;
+  readonly isStarted: boolean = false;
+
+  static create<O = any, S = any>(config?: any) {
+    return Node.create(config) as SR_Node<O, S>;
+  }
+}
+
+export const SpeechRecognition = SR_Node.create<SpeechRecognitionOptions>({
+  name: 'SpeechRecognition',
+
+  addOptions() {
+    return {
+      lang: 'fr-FR',
+    };
+  },
+
+  onCreate() {
+    if (
+      !('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)
+    ) {
+      console.warn(
+        '"speechrecognition extension from @edifice.io/tiptap-extensions" requires a browser supporting the SpeechRecognition API".',
+      );
+    }
+  },
+
+  addCommands() {
+    return {
+      startSpeechRecognition:
+        () =>
+        ({ commands }) => {
+          const SpeechRecognition =
+            window.SpeechRecognition || window.webkitSpeechRecognition;
+          this.recognition = new SpeechRecognition();
+
+          this.recognition.lang = this.options.lang;
+          this.recognition.interimResults = true;
+          this.recognition.maxAlternatives = 1;
+          this.recognition.continuous = true;
+
+          this.recognition.start();
+
+          // Memoize initial caret positions
+          let { from, to } = this.editor.state.selection;
+
+          this.recognition.onresult = (event: SpeechRecognitionEvent) => {
+            let currentResult = '';
+
+            // Add to the currentResult variable the content of the last recognized sentence
+            for (let i = event.resultIndex; i < event.results.length; i++) {
+              currentResult += event.results[i][0].transcript;
+            }
+
+            // Is this the final recognition ?
+            const isFinal = event.results[event.results.length - 1].isFinal;
+
+            // Replace selection by the last recognized sentence (+ style and select, if not final)
+            this.editor.commands.deleteRange({ from, to });
+            this.editor.commands.insertContentAt(
+              from,
+              isFinal ? currentResult : `<code>${currentResult}</code>`,
+              { updateSelection: !isFinal },
+            );
+            to = this.editor.state.selection.to;
+
+            if (isFinal) {
+              // Next content will go after last insertion
+              from = to;
+            }
+          };
+
+          this.recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
+            // TODO create a "feedback" tiptap extension, to display user friendly error messages ?
+            console.log(
+              `[speechrecognition from @edifice.io/tiptap-extensions][error][${event.error}]: ${event.message}`,
+            );
+          };
+
+          this.recognition.onstart = () => {
+            this.isStarted = true;
+          };
+
+          this.recognition.onend = () => {
+            this.isStarted = false;
+          };
+
+          return commands;
+        },
+
+      stopSpeechRecognition:
+        () =>
+        ({ commands }) => {
+          this.recognition.stop();
+          this.editor.commands.focus();
+          return commands;
+        },
+
+      isSpeechRecognitionStarted: () => () => this.isStarted,
+    };
+  },
+});

package/src/speech-synthesis/index.ts

@@ -0,0 +1,5 @@
+import { SpeechSynthesis } from './speech-synthesis';
+
+export * from './speech-synthesis';
+
+export default SpeechSynthesis;

package/src/speech-synthesis/speech-synthesis.ts

@@ -0,0 +1,52 @@
+import { Node } from '@tiptap/core';
+
+export interface SpeechSynthesisOptions {
+  lang: string;
+  pitch: number;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    speechSynthesis: {
+      startSpeechSynthesis: () => ReturnType;
+      stopSpeechSynthesis: () => ReturnType;
+    };
+  }
+}
+
+class SS_Node<O = any, S = any> extends Node<O, S> {
+  static create<O = any, S = any>(config?: any) {
+    return Node.create(config) as SS_Node<O, S>;
+  }
+}
+
+export const SpeechSynthesis = SS_Node.create<SpeechSynthesisOptions>({
+  name: 'speechSynthesis',
+  addOptions() {
+    return {
+      lang: 'fr-FR',
+      pitch: 1,
+    };
+  },
+  addCommands() {
+    return {
+      startSpeechSynthesis:
+        () =>
+        ({ commands }) => {
+          this.speechSynthesis = new SpeechSynthesisUtterance();
+          this.speechSynthesis.lang = this.options.lang;
+          this.speechSynthesis.pitch = this.options.pitch;
+          this.speechSynthesis.text = this.editor.getText();
+
+          window.speechSynthesis.speak(this.speechSynthesis);
+          return commands;
+        },
+      stopSpeechSynthesis:
+        () =>
+        ({ commands }) => {
+          window.speechSynthesis.cancel();
+          return commands;
+        },
+    };
+  },
+});

package/src/table-cell/index.ts

@@ -0,0 +1,5 @@
+import { TableCell } from './table-cell';
+
+export * from './table-cell';
+
+export default TableCell;

package/src/table-cell/table-cell.ts

@@ -0,0 +1,28 @@
+import { TableCell as TipTapTableCell } from '@tiptap/extension-table-cell';
+
+/**
+ * This custom extension allows setting a background-color to table cells.
+ * Apply with ̀`editor.chain().focus().setCellAttribute("backgroundColor", color).run()`
+ */
+export const TableCell = TipTapTableCell.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      backgroundColor: {
+        default: null,
+        renderHTML: (attributes: { backgroundColor?: string }) => {
+          if (!attributes.backgroundColor) {
+            return {};
+          }
+
+          return {
+            style: `background-color: ${attributes.backgroundColor}`,
+          };
+        },
+        parseHTML: (element: { style?: { backgroundColor: string } }) => {
+          return element.style?.backgroundColor?.replace(/['"]+/g, '');
+        },
+      },
+    };
+  },
+});

package/src/transform/html-to-json/html-to-json.ts

@@ -0,0 +1,5 @@
+import { Extensions, HTMLContent, generateJSON } from '@tiptap/core';
+
+export default (html: HTMLContent, extensions: Extensions) => {
+  return generateJSON(html, extensions);
+};

package/src/transform/index.ts

@@ -0,0 +1,4 @@
+import htmlToJson from './html-to-json/html-to-json';
+import jsonToHtml from './json-to-html/json-to-html';
+
+export { htmlToJson, jsonToHtml };

package/src/transform/json-to-html/json-to-html.ts

@@ -0,0 +1,5 @@
+import { Extensions, JSONContent, generateHTML } from '@tiptap/core';
+
+export default (json: JSONContent, extensions: Extensions) => {
+  return generateHTML(json, extensions);
+};

package/src/video/index.ts

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

package/src/video/video.ts

@@ -0,0 +1,173 @@
+import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core';
+
+export interface VideoOptions {
+  url: string;
+  width: number;
+  height: number;
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    video: {
+      /**
+       * Set a video node
+       * @param options.updateSelection set to true will select the newly inserted content
+       */
+      setVideo: (
+        id: string,
+        src: string,
+        isCaptation: boolean,
+        width?: number,
+        height?: number,
+        controls?: boolean,
+        controlslist?: string,
+        options?: { updateSelection: boolean },
+      ) => ReturnType;
+      /**
+       * Toggle a video
+       */
+      toggleVideo: (src: string) => ReturnType;
+    };
+  }
+}
+
+const VIDEO_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/;
+
+export const Video = Node.create({
+  name: 'video',
+  group: 'block',
+  draggable: true,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        parseHTML: (el: any) => (el as HTMLSpanElement).getAttribute('src'),
+        renderHTML: (attrs: any) => ({ src: attrs.src }),
+      },
+      controls: {
+        default: true,
+        parseHTML: (el: any) => {
+          if ((el as HTMLSpanElement).getAttribute('controls')) {
+            return (el as HTMLSpanElement).getAttribute('controls');
+          } else if ((el as HTMLSpanElement).hasAttribute('controls')) {
+            return true;
+          } else {
+            return false;
+          }
+        },
+        renderHTML: (attrs: any) => ({ controls: attrs.controls }),
+      },
+      documentId: {
+        default: '',
+        renderHTML: (attributes: any) => {
+          return { 'data-document-id': attributes.documentId };
+        },
+        parseHTML: (element: any) => element.getAttribute('data-document-id'),
+      },
+      isCaptation: {
+        default: false,
+        renderHTML: (attributes: any) => {
+          return { 'data-document-is-captation': attributes.isCaptation };
+        },
+        parseHTML: (element: any) =>
+          element.getAttribute('data-document-is-captation'),
+      },
+      videoResolution: {
+        default: '404x720',
+        renderHTML: (attributes: any) => {
+          return { 'data-video-resolution': attributes.videoResolution };
+        },
+        parseHTML: (element: any) =>
+          element.getAttribute('data-video-resolution'),
+      },
+      width: {
+        renderHTML: (attributes: any) => {
+          return {
+            width: parseInt(attributes.width),
+          };
+        },
+        parseHTML: (element) => element.getAttribute('width'),
+      },
+      height: {
+        renderHTML: (attributes: any) => {
+          return {
+            height: parseInt(attributes.height),
+          };
+        },
+        parseHTML: (element) => element.getAttribute('height'),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.video-wrapper>video,video',
+        getAttrs: (el: any) => ({
+          src: (el as HTMLVideoElement).getAttribute('src'),
+        }),
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      { class: 'video-wrapper' },
+      ['video', mergeAttributes(HTMLAttributes)],
+    ];
+  },
+
+  addCommands() {
+    return {
+      setVideo:
+        (
+          id: string,
+          src: string,
+          isCaptation: boolean,
+          width = 350,
+          height = 197,
+          controls = true,
+          controlslist = 'nodownload',
+          options,
+        ) =>
+        ({ commands, state }) => {
+          return commands.insertContentAt(
+            state.selection,
+            `<video 
+              controls="${controls}" 
+              controlslist="${controlslist}"
+              src="${src}" 
+              width="${width}"
+              height="${height}"
+              data-document-id="${id}" 
+              data-document-is-captation="${isCaptation}"
+              data-video-resolution="${width}x${height}" />`,
+            options,
+          );
+        },
+
+      toggleVideo:
+        () =>
+        ({ commands }) =>
+          commands.toggleNode(this.name, 'paragraph'),
+    };
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: VIDEO_INPUT_REGEX,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, , src] = match;
+
+          return { src };
+        },
+      }),
+    ];
+  },
+});

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2016",
+    "module": "ESNext",
+    "lib": ["ES2016", "DOM"],
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": false,
+    "noImplicitReturns": false,
+    "skipLibCheck": true,
+    "sourceMap": true
+  },
+  "exclude": ["dist", "node_modules"],
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,46 @@
+import { resolve } from 'path';
+
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+import { dependencies } from './package.json';
+
+export default defineConfig({
+  esbuild: {
+    minifyIdentifiers: false,
+  },
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+      },
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      output: [
+        {
+          preserveModules: true,
+          preserveModulesRoot: 'src',
+          entryFileNames: ({ name: fileName }) => {
+            return `${fileName}.js`;
+          },
+        },
+        {
+          preserveModules: true,
+          preserveModulesRoot: 'src',
+          format: 'cjs',
+          entryFileNames: ({ name: fileName }) => {
+            return `${fileName}.cjs`;
+          },
+        },
+      ],
+      external: [...Object.keys(dependencies)],
+    },
+  },
+  plugins: [
+    dts({
+      tsconfigPath: './tsconfig.json',
+    }),
+  ],
+});