@studiocms/wysiwyg 0.1.0-experimental.2 → 0.1.0-experimental.4

package/dist/wysiwyg/editorPlugins/typed/components.js

@@ -0,0 +1,109 @@
+import { cmpId, traitStringId } from "./utils.js";
+const getTraitType = (value) => {
+  if (typeof value === "number") return "number";
+  if (typeof value === "boolean") return "checkbox";
+  return "text";
+};
+var components_default = (editor, opts) => {
+  const domc = editor.DomComponents;
+  const { keys } = Object;
+  const typedProps = {
+    strings: [],
+    "type-speed": 0,
+    "start-delay": 0,
+    "back-speed": 0,
+    "smart-backspace": true,
+    "back-delay": 700,
+    "fade-out": false,
+    "fade-out-class": "typed-fade-out",
+    "fade-out-delay": 500,
+    "show-cursor": true,
+    "cursor-char": "|",
+    "auto-insert-css": true,
+    "bind-input-focus-events": false,
+    "content-type": "html",
+    loop: false,
+    "loop-count": Number.POSITIVE_INFINITY,
+    shuffle: false,
+    attr: ""
+  };
+  const typedPropsKeys = keys(typedProps);
+  const traits = typedPropsKeys.filter((item) => ["strings"].indexOf(item) < 0).map((name) => ({
+    changeProp: true,
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    type: getTraitType(typedProps[name]),
+    min: 0,
+    name
+  }));
+  traits.unshift({
+    changeProp: true,
+    name: "strings",
+    type: traitStringId
+  });
+  domc.addType(cmpId, {
+    model: {
+      defaults: opts.props({
+        ...typedProps,
+        typedsrc: opts.script,
+        droppable: 0,
+        traits,
+        "script-props": [...typedPropsKeys, "typedsrc"],
+        script(props) {
+          const getStrings = (value) => {
+            if (Array.isArray(value)) {
+              return value;
+            }
+            if (value.indexOf("\n") >= 0) {
+              return value.split("\n");
+            }
+            return [];
+          };
+          const strings = getStrings(props.strings);
+          const int = (num) => Number.parseInt(num, 10) || 0;
+          const bool = (val) => !!val;
+          const init = () => {
+            const el = this;
+            el.innerHTML = "<span></span>";
+            const loopCount = Number.parseInt(`${props["loop-count"]}`, 10);
+            `${props["type-speed"]}`;
+            const config = {
+              typeSpeed: int(props["type-speed"]),
+              startDelay: int(props["start-delay"]),
+              backDelay: int(props["back-delay"]),
+              backSpeed: int(props["back-speed"]),
+              smartBackspace: bool(props["smart-backspace"]),
+              fadeOut: bool(props["fade-out"]),
+              fadeOutClass: props["fade-out-class"],
+              fadeOutDelay: int(props["fade-out-delay"]),
+              shuffle: bool(props.shuffle),
+              loop: bool(props.loop),
+              loopCount: Number.isNaN(loopCount) ? Number.POSITIVE_INFINITY : loopCount,
+              showCursor: bool(props["show-cursor"]),
+              cursorChar: props["cursor-char"],
+              autoInsertCss: bool(props["auto-insert-css"]),
+              bindInputFocusEvents: bool(props["bind-input-focus-events"]),
+              attr: props.attr,
+              contentType: props["content-type"]
+            };
+            if (strings?.length) {
+              config.strings = strings;
+            }
+            new window.Typed(el.children[0], config);
+          };
+          if (!window.Typed) {
+            const scr = document.createElement("script");
+            scr.src = props.typedsrc;
+            scr.onload = init;
+            document.head.appendChild(scr);
+          } else {
+            init();
+          }
+        }
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      })
+    }
+  });
+};
+export {
+  components_default as default
+};

package/dist/wysiwyg/editorPlugins/typed/index.d.ts

@@ -0,0 +1,35 @@
+import type { BlockProperties, ComponentDefinition, Plugin } from 'grapesjs';
+export interface PluginOptions {
+    /**
+     * Library to load asynchronously in case `Typed` is not found.
+     * @default 'https://cdn.jsdelivr.net/npm/typed.js@2.0.11'
+     */
+    script?: string;
+    /**
+     * Object to extend the default block, eg. `{ label: 'Typed', ... }`.
+     * Pass a falsy value to avoid adding the block
+     * @default {}
+     */
+    block?: Partial<BlockProperties>;
+    /**
+     * Customize the component props. The final object should be returned.
+     * @default (props) => props
+     * @example
+     * props: props => {
+     *    props.traits = props.traits.map(trait => {
+     *      if (trait.name == 'strings') {
+     *        trait.label = 'Custom <b>trait<b/> label';
+     *      }
+     *      // this trait will be removed
+     *      if (trait.name == 'fade-out-class') return;
+     *      return trait;
+     *    }).filter(Boolean);
+     *
+     *    return props;
+     * }
+     */
+    props?: (p: ComponentDefinition) => ComponentDefinition;
+}
+export type RequiredPluginOptions = Required<PluginOptions>;
+declare const plugin: Plugin<PluginOptions>;
+export default plugin;

package/dist/wysiwyg/editorPlugins/typed/index.js

@@ -0,0 +1,18 @@
+import loadBlocks from "./blocks.js";
+import loadComponents from "./components.js";
+import loadTraits from "./traits.js";
+const plugin = (editor, opts = {}) => {
+  const options = {
+    script: "https://cdn.jsdelivr.net/npm/typed.js@2.0.11",
+    block: {},
+    props: (p) => p,
+    ...opts
+  };
+  loadComponents(editor, options);
+  loadBlocks(editor, options);
+  loadTraits(editor);
+};
+var typed_default = plugin;
+export {
+  typed_default as default
+};

package/dist/wysiwyg/editorPlugins/typed/traits.d.ts

@@ -0,0 +1,3 @@
+import type { Editor } from 'grapesjs';
+declare const _default: (editor: Editor) => void;
+export default _default;

package/dist/wysiwyg/editorPlugins/typed/traits.js

@@ -0,0 +1,18 @@
+import { traitStringId } from "./utils.js";
+var traits_default = (editor) => {
+  editor.TraitManager.addType(traitStringId, {
+    createInput({ component }) {
+      return `<textarea>${component.get("strings").join("\n")}</textarea>`;
+    },
+    onUpdate({ component, elInput }) {
+      elInput.value = component.get("strings").join("\n");
+    },
+    onEvent({ component, elInput }) {
+      const value = (elInput.value || "").split("\n");
+      component.set("strings", value);
+    }
+  });
+};
+export {
+  traits_default as default
+};

package/dist/wysiwyg/editorPlugins/typed/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const cmpId = "typed";
+export declare const traitStringId = "typed-strings";

package/dist/wysiwyg/editorPlugins/typed/utils.js

@@ -0,0 +1,6 @@
+const cmpId = "typed";
+const traitStringId = "typed-strings";
+export {
+  cmpId,
+  traitStringId
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/wysiwyg",
-  "version": "0.1.0-experimental.2",
+  "version": "0.1.0-experimental.4",
   "description": "Add A WYSIWYG Editor to your StudioCMS project with ease!",
   "author": {
     "name": "Adam Matthiesen | Jacob Jenkins | Paul Valladares",
@@ -62,29 +62,17 @@
     "@studiocms/ui": "^0.4.16",
     "astro-integration-kit": "^0.18",
     "grapesjs": "^0.22.6",
-    "grapesjs-blocks-basic": "^1.0.2",
-    "grapesjs-plugin-forms": "^2.0.6",
-    "grapesjs-component-countdown": "1.0.2",
-    "grapesjs-plugin-export": "^1.0.12",
-    "grapesjs-tabs": "^1.0.6",
-    "grapesjs-custom-code": "^1.0.2",
-    "grapesjs-touch": "^0.1.1",
-    "grapesjs-parser-postcss": "^1.0.3",
-    "grapesjs-tooltip": "0.1.8",
-    "grapesjs-tui-image-editor": "^1.0.2",
-    "grapesjs-typed": "^2.0.1",
-    "grapesjs-style-bg": "^2.0.2",
-    "grapesjs-rte-extensions": "^1.0.10",
     "ultrahtml": "^1.5.3",
+    "tui-image-editor": "^3.15.3",
     "@studiocms/grapesjs-plugin": "0.1.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0"
   },
   "peerDependencies": {
-    "astro": "^5.6",
-    "studiocms": "0.1.0-beta.15",
-    "vite": "^6.2.6"
+    "astro": "^5.7.1",
+    "studiocms": ">=0.1.0-beta.14",
+    "vite": "^6.2.5"
   },
   "scripts": {
     "build": "build-scripts build 'src/**/*.{ts,astro,css,js}'",