tetrons 2.3.22 → 2.3.23

package/dist/components/tetrons/toolbar/extensions/Embed.ts

@@ -0,0 +1,113 @@
+import { Node, mergeAttributes, CommandProps } from "@tiptap/core";
+
+export const Embed = Node.create({
+  name: "embed",
+  group: "block",
+  atom: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      width: { default: 560 },
+      height: { default: 315 },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "iframe[src]" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["iframe", mergeAttributes(HTMLAttributes)];
+  },
+
+  addCommands() {
+    return {
+      setEmbed: ((attributes: {
+        src: string;
+        width?: number;
+        height?: number;
+      }) => {
+        return ({ chain }: CommandProps): boolean => {
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs: attributes,
+            })
+            .run();
+        };
+      }).bind(this),
+    };
+  },
+
+  addNodeView() {
+    return ({ node, getPos, editor }) => {
+      const container = document.createElement('div');
+      container.style.position = 'relative';
+      container.style.display = 'inline-block';
+      container.style.width = node.attrs.width + 'px';
+      container.style.height = node.attrs.height + 'px';
+  
+      const iframe = document.createElement('iframe');
+      iframe.setAttribute('src', node.attrs.src);
+      iframe.setAttribute('frameborder', '0');
+      iframe.setAttribute('allowfullscreen', 'true');
+      iframe.style.width = '100%';
+      iframe.style.height = '100%';
+      container.appendChild(iframe);
+  
+      const handle = document.createElement('div');
+      handle.style.position = 'absolute';
+      handle.style.width = '16px';
+      handle.style.height = '16px';
+      handle.style.right = '0';
+      handle.style.bottom = '0';
+      handle.style.cursor = 'se-resize';
+      handle.style.background = 'rgba(0,0,0,0.5)';
+      handle.style.borderRadius = '2px';
+      container.appendChild(handle);
+  
+      let startX: number, startY: number, startWidth: number, startHeight: number;
+  
+      const onMouseDown = (event: MouseEvent) => {
+        event.preventDefault();
+        startX = event.clientX;
+        startY = event.clientY;
+        startWidth = container.offsetWidth;
+        startHeight = container.offsetHeight;
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+      };
+  
+      const onMouseMove = (event: MouseEvent) => {
+        const newWidth = Math.max(100, startWidth + (event.clientX - startX));
+        const newHeight = Math.max(100, startHeight + (event.clientY - startY));
+        container.style.width = newWidth + 'px';
+        container.style.height = newHeight + 'px';
+      };
+  
+      const onMouseUp = () => {
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+
+        editor.commands.command(({ tr }) => {
+          tr.setNodeMarkup(getPos(), undefined, {
+            ...node.attrs,
+            width: container.offsetWidth,
+            height: container.offsetHeight,
+          });
+          return true;
+        });
+      };      
+  
+      handle.addEventListener('mousedown', onMouseDown);
+  
+      return {
+        dom: container,
+        destroy() {
+          handle.removeEventListener('mousedown', onMouseDown);
+        }
+      };
+    };
+  },
+});

package/dist/components/tetrons/toolbar/extensions/FontFamily.ts

@@ -0,0 +1,43 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontFamily: {
+      setFontFamily: (font: string) => ReturnType;
+    };
+  }
+}
+
+export const FontFamily = Mark.create({
+  name: 'fontFamily',
+
+  addAttributes() {
+    return {
+      font: {
+        default: null,
+        parseHTML: element => element.style.fontFamily.replace(/['"]/g, ''),
+        renderHTML: attributes => {
+          if (!attributes.font) return {};
+          return { style: `font-family: ${attributes.font}` };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ style: 'font-family' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setFontFamily:
+        font =>
+        ({ commands }) =>
+          commands.setMark(this.name, { font }),
+    };
+  },
+});

package/dist/components/tetrons/toolbar/extensions/FontSize.ts

@@ -0,0 +1,43 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    fontSize: {
+      setFontSize: (size: string) => ReturnType;
+    };
+  }
+}
+
+export const FontSize = Mark.create({
+  name: "fontSize",
+
+  addAttributes() {
+    return {
+      size: {
+        default: null,
+        parseHTML: (element) => element.style.fontSize,
+        renderHTML: (attributes) => {
+          if (!attributes.size) return {};
+          return { style: `font-size: ${attributes.size}` };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ style: "font-size" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["span", mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setFontSize:
+        (size) =>
+        ({ commands }) =>
+          commands.setMark(this.name, { size }),
+    };
+  },
+});

package/dist/components/tetrons/toolbar/extensions/ResizableTable.ts

@@ -0,0 +1,16 @@
+import { Table } from "@tiptap/extension-table";
+import { columnResizing, tableEditing } from "prosemirror-tables";
+import { Plugin } from "prosemirror-state";
+
+export const ResizableTable = Table.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      resizable: true,
+    };
+  },
+
+  addProseMirrorPlugins(): Plugin[] {
+    return [columnResizing({ handleWidth: 5 }), tableEditing()];
+  },
+});

package/dist/components/tetrons/toolbar/marks/Subscript.ts

@@ -0,0 +1,45 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
+
+export const Subscript = Mark.create({
+  name: "subscript",
+
+  excludes: "superscript",
+
+  parseHTML() {
+    return [{ tag: "sub" }, { style: "vertical-align: sub" }];
+  },
+
+  renderHTML() {
+    return ["sub", 0];
+  },
+
+  addCommands() {
+    return {
+      toggleSubscript:
+        () =>
+        ({ chain }) =>
+          chain()
+            .unsetMark("superscript")
+            .toggleMark(this.name)
+            .run(),
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: /~([^~]+)~/,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: /~([^~]+)~/g,
+        type: this.type,
+      }),
+    ];
+  },
+});

package/dist/components/tetrons/toolbar/marks/Superscript.ts

@@ -0,0 +1,45 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
+
+export const Superscript = Mark.create({
+  name: "superscript",
+
+  excludes: "subscript",
+
+  parseHTML() {
+    return [{ tag: "sup" }, { style: "vertical-align: super" }];
+  },
+
+  renderHTML() {
+    return ["sup", 0];
+  },
+
+  addCommands() {
+    return {
+      toggleSuperscript:
+        () =>
+        ({ chain }) =>
+          chain()
+            .unsetMark("subscript")
+            .toggleMark(this.name)
+            .run(),
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: /\^([^^]+)\^/,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: /\^([^^]+)\^/g,
+        type: this.type,
+      }),
+    ];
+  },
+});

package/dist/index.d.ts

@@ -1,6 +1,12 @@
-import EditorContent from "./components/tetrons/EditorContent";
-export declare function initializeTetrons(apiKey: string): Promise<void>;
-export declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
-export declare function isApiKeyValid(): boolean;
-export { EditorContent };
-export default EditorContent;
+import React from 'react';
+
+type EditorContentProps = {
+    apiKey: string;
+};
+declare function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
+
+declare function initializeTetrons(apiKey: string): Promise<void>;
+declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
+declare function isApiKeyValid(): boolean;
+
+export { EditorContent, EditorContent as default, getTetronsVersion, initializeTetrons, isApiKeyValid };