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

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

@@ -1,74 +0,0 @@
-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

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

package/src/heading/heading.ts

@@ -1,90 +0,0 @@
-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

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

package/src/highlight/highlight.ts

@@ -1,27 +0,0 @@
-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

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

package/src/hyperlink/hyperlink.ts

@@ -1,92 +0,0 @@
-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

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

package/src/iframe/iframe.ts

@@ -1,112 +0,0 @@
-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

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

package/src/image/custom-image.ts

@@ -1,226 +0,0 @@
-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

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

package/src/index.ts

@@ -1,19 +0,0 @@
-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

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