@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.0

package/dist/wysiwyg/components/Editor.astro

@@ -1,765 +0,0 @@
----
-import '@studiocms/ui/css/colors.css';
-import 'grapesjs/dist/css/grapes.min.css';
-import '../editorPlugins/rte/styles.css';
-import '../styles/main.css';
-import { importComponentsKeys } from 'studiocms/lib/renderer/runtime.js';
-import type { PluginPageTypeEditorProps } from 'studiocms/types';
-import { firstUpperCase } from '../../utils.js';
-
-const AstroSVG: string =
-	'<svg xmlns="http://www.w3.org/2000/svg" style="width:48px;height:48px" viewBox="0 0 24 24"><path fill="currentColor" d="M9.24 19.035c-.901-.826-1.164-2.561-.789-3.819c.65.793 1.552 1.044 2.486 1.186c1.44.218 2.856.137 4.195-.524c.153-.076.295-.177.462-.278c.126.365.159.734.115 1.11c-.107.915-.56 1.622-1.283 2.158c-.289.215-.594.406-.892.608c-.916.622-1.164 1.35-.82 2.41l.034.114a2.4 2.4 0 0 1-1.07-.918a2.6 2.6 0 0 1-.412-1.401c-.003-.248-.003-.497-.036-.74c-.081-.595-.36-.86-.883-.876a1.034 1.034 0 0 0-1.075.843q-.013.058-.033.126M4.1 15.007s2.666-1.303 5.34-1.303l2.016-6.26c.075-.304.296-.51.544-.51c.25 0 .47.206.545.51l2.016 6.26c3.167 0 5.34 1.303 5.34 1.303L15.363 2.602c-.13-.366-.35-.602-.645-.602H9.283c-.296 0-.506.236-.645.602c-.01.024-4.538 12.405-4.538 12.405"/></svg>';
-
-const componentKeys = Object.keys(await importComponentsKeys());
-
-const AstroComponentBlocks = componentKeys.map((key) => ({
-	id: `astro-component-${key}`,
-	label: firstUpperCase(key),
-	category: 'Astro Components',
-	media: AstroSVG,
-	key,
-}));
-
-interface Props extends PluginPageTypeEditorProps {}
----
-
-<div
-  class="editor-container"
-  data-blocks={JSON.stringify(AstroComponentBlocks || [])}
-  data-compkeys={JSON.stringify(componentKeys || [])}
->
-  <div class="editor">
-    <div id="gjs" style=" overflow:hidden">
-      <h1>Hello World Component!</h1>
-    </div>
-  </div>
-</div>
-<textarea id="page-content" name="page-content" style="display: none;"
-  >{Astro.props.content}</textarea
->
-
-<script>
-  import { toast } from "@studiocms/ui/components/Toast/toast.js";
-  import grapesjs, { type Editor, usePlugin } from "grapesjs";
-  import { parse } from "../../utils.js";
-  import { 
-    blocks, 
-    customCode, 
-    countdown, 
-    forms, 
-    rte, 
-    tabs, 
-    tooltip, 
-    tuiImageEditor, 
-    typed 
-  } from '../editorPlugins/index.js';
-  import "@studiocms/grapesjs-plugin";
-
-  /**
-   * Represents an array of Astro component blocks, where each block contains metadata
-   * about a specific component used in the system.
-   */
-  type AstroComponentBlocks = {
-    id: string;
-    label: string;
-    category: string;
-    media: string;
-    key: string;
-  }[];
-
-  /**
-   * Represents an array of editor blocks used in the Astro component editor.
-   * Each block contains metadata and a function to generate its content.
-   */
-  type AstroComponentEditorBlocks = {
-    id: string;
-    label: string;
-    category: string;
-    media: string;
-    content: () => string;
-  }[];
-
-  /**
-   * Converts an array of `AstroComponentBlocks` into an array of `AstroComponentEditorBlocks`.
-   *
-   * Each block in the input array is transformed by extracting its `key` property
-   * and using it to generate a `content` function that returns a string representation
-   * of an HTML element with the given key as its tag name. The rest of the block's properties
-   * are preserved in the output.
-   *
-   * @param blocks - An array of `AstroComponentBlocks` to be converted.
-   * @returns An array of `AstroComponentEditorBlocks` with updated `content` functions.
-   */
-  function convertComponentBlocks(
-    blocks: AstroComponentBlocks,
-  ): AstroComponentEditorBlocks {
-    return blocks.map(({ key, ...block }) => ({
-      ...block,
-      content: () => `<${key}></${key}>`,
-    }));
-  }
-
-  const getPlugin = (componentKeys: string[]) => (editor: Editor) => {
-    editor.DomComponents.addType("astro-component", {
-      isComponent: (el) => componentKeys.includes(el.tagName?.toLowerCase()),
-      view: {
-        tagName: () => "div",
-        onRender: async ({ el, model }) => {
-          // Fetch from API endpoint that uses Astro Container API to render Component to html
-          const getCompResponse = await fetch(
-            "/studiocms_api/wysiwyg_editor/partial",
-            {
-              method: "POST",
-              body: JSON.stringify({ componentKey: model.tagName }),
-              headers: {
-                "Content-Type": "application/json",
-              },
-            },
-          );
-
-          // If response is not valid, log error.
-          if (!getCompResponse.ok)
-            console.log(
-              "[Error]: Could not fetch component HTML, please try again.",
-            );
-
-          // Get HTML from JSON response
-          const html = await getCompResponse.text();
-
-          // Set the HTML in the Editor View
-          el.innerHTML = html;
-        },
-      },
-    });
-  };
-
-  const pageContent = document.querySelector<HTMLTextAreaElement>(
-    "#page-content",
-  ) as HTMLTextAreaElement;
-  const editorContainer = document.querySelector<HTMLDivElement>(
-    ".editor-container",
-  ) as HTMLDivElement;
-
-  const rawBlocks = parse<AstroComponentBlocks>(
-    editorContainer.dataset.blocks as string,
-  );
-  const componentKeys = parse<string[]>(
-    editorContainer.dataset.compkeys as string,
-  );
-
-  const fallbackPages = {
-    pages: [{ name: "page" }],
-  };
-
-  const projectData = JSON.parse(
-    pageContent.innerText || JSON.stringify(fallbackPages),
-  );
-
-  const generateHTML = async (editor: Editor): Promise<string> => {
-    const page = editor.Pages.getMain();
-    const component = page.getMainComponent();
-    const htmlData = component.toHTML({ tag: "div" });
-    const styles = editor.getCss({ component })?.replaceAll("body", "div");
-    const html = `${htmlData}${styles ? `<style>${styles}</style>` : ""}`;
-    return html;
-  };
-
-  // Inline storage
-  const inlineStorage = (editor: Editor) => {
-    editor.Storage.add("inline", {
-      load() {
-        return projectData;
-      },
-      async store(data) {
-        pageContent.innerText = JSON.stringify({
-          ...data,
-          __STUDIOCMS_HTML: await generateHTML(editor),
-        });
-      },
-    });
-  };
-
-	const osm = 'open-sm';
-	const otm = 'open-tm';
-	const ola = 'open-layers';
-	const obl = 'open-blocks';
-	const iconStyle = 'style="display: block; max-width:22px"';
-
-  const editor = grapesjs.init({
-    container: "#gjs",
-    height: "80dvh",
-    width: "auto",
-    // Disable the storage manager for the moment
-    storageManager: { type: "inline" },
-    panels: { defaults: [] },
-    plugins: [
-      usePlugin(getPlugin(componentKeys)),
-      usePlugin(inlineStorage),
-      usePlugin(blocks, { 
-        flexGrid: true 
-      }),
-      usePlugin(tabs, {
-        tabsBlock: { 
-          category: 'Extra' 
-        },
-      }),
-      usePlugin(countdown),
-      usePlugin(customCode),
-      usePlugin(tooltip),
-      usePlugin(tuiImageEditor, {
-        script: [
-          "https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js",
-          "https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js",
-          "https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js",
-        ],
-        style: [
-          "https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css",
-          "https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css",
-        ],
-      }),
-      usePlugin(typed),
-      usePlugin(forms),
-      usePlugin(rte),
-      '@studiocms/grapesjs-plugin',
-    ],
-    blockManager: {
-      blocks: convertComponentBlocks(rawBlocks),
-    },
-    styleManager: {
-      sectors: [
-        {
-          name: "General",
-          properties: [
-            {
-              extend: "float",
-              type: "radio",
-              default: "none",
-              options: [
-                { value: "none", className: "fa fa-times", id: "" },
-                { value: "left", className: "fa fa-align-left", id: "" },
-                { value: "right", className: "fa fa-align-right", id: "" },
-              ],
-            },
-            "display",
-            { extend: "position", type: "select" },
-            "top",
-            "right",
-            "left",
-            "bottom",
-          ],
-        },
-        {
-          name: "Dimension",
-          open: false,
-          properties: [
-            "width",
-            {
-              id: "flex-width",
-              type: "integer",
-              name: "Width",
-              units: ["px", "%"],
-              property: "flex-basis",
-              toRequire: true,
-            },
-            "height",
-            "max-width",
-            "min-height",
-            "margin",
-            "padding",
-          ],
-        },
-        {
-          name: "Typography",
-          open: false,
-          properties: [
-            "font-family",
-            "font-size",
-            "font-weight",
-            "letter-spacing",
-            "color",
-            "line-height",
-            {
-              extend: "text-align",
-              options: [
-                { id: "left", label: "Left", className: "fa fa-align-left" },
-                {
-                  id: "center",
-                  label: "Center",
-                  className: "fa fa-align-center",
-                },
-                { id: "right", label: "Right", className: "fa fa-align-right" },
-                {
-                  id: "justify",
-                  label: "Justify",
-                  className: "fa fa-align-justify",
-                },
-              ],
-            },
-            {
-              property: "text-decoration",
-              type: "radio",
-              default: "none",
-              options: [
-                { id: "none", label: "None", className: "fa fa-times" },
-                {
-                  id: "underline",
-                  label: "underline",
-                  className: "fa fa-underline",
-                },
-                {
-                  id: "line-through",
-                  label: "Line-through",
-                  className: "fa fa-strikethrough",
-                },
-              ],
-            },
-            "text-shadow",
-          ],
-        },
-        {
-          name: "Decorations",
-          open: false,
-          properties: [
-            "opacity",
-            "border-radius",
-            "border",
-            "box-shadow",
-            "background", // { id: 'background-bg', property: 'background', type: 'bg' }
-          ],
-        },
-        {
-          name: "Extra",
-          open: false,
-          buildProps: ["transition", "perspective", "transform"],
-        },
-        {
-          name: "Flex",
-          open: false,
-          properties: [
-            {
-              name: "Flex Container",
-              property: "display",
-              type: "select",
-              defaults: "block",
-              list: [
-                { value: "block", name: "Disable", id: "" },
-                { value: "flex", name: "Enable", id: "" },
-              ],
-            },
-            {
-              name: "Flex Parent",
-              property: "label-parent-flex",
-              type: "integer",
-            },
-            {
-              name: "Direction",
-              property: "flex-direction",
-              type: "radio",
-              defaults: "row",
-              list: [
-                {
-                  value: "row",
-                  name: "Row",
-                  className: "icons-flex icon-dir-row",
-                  title: "Row",
-                  id: "",
-                },
-                {
-                  value: "row-reverse",
-                  name: "Row reverse",
-                  className: "icons-flex icon-dir-row-rev",
-                  title: "Row reverse",
-                  id: "",
-                },
-                {
-                  value: "column",
-                  name: "Column",
-                  title: "Column",
-                  className: "icons-flex icon-dir-col",
-                  id: "",
-                },
-                {
-                  value: "column-reverse",
-                  name: "Column reverse",
-                  title: "Column reverse",
-                  className: "icons-flex icon-dir-col-rev",
-                  id: "",
-                },
-              ],
-            },
-            {
-              name: "Justify",
-              property: "justify-content",
-              type: "radio",
-              defaults: "flex-start",
-              list: [
-                {
-                  value: "flex-start",
-                  className: "icons-flex icon-just-start",
-                  title: "Start",
-                  id: "",
-                },
-                {
-                  value: "flex-end",
-                  title: "End",
-                  className: "icons-flex icon-just-end",
-                  id: "",
-                },
-                {
-                  value: "space-between",
-                  title: "Space between",
-                  className: "icons-flex icon-just-sp-bet",
-                  id: "",
-                },
-                {
-                  value: "space-around",
-                  title: "Space around",
-                  className: "icons-flex icon-just-sp-ar",
-                  id: "",
-                },
-                {
-                  value: "center",
-                  title: "Center",
-                  className: "icons-flex icon-just-sp-cent",
-                  id: "",
-                },
-              ],
-            },
-            {
-              name: "Align",
-              property: "align-items",
-              type: "radio",
-              defaults: "center",
-              list: [
-                {
-                  value: "flex-start",
-                  title: "Start",
-                  className: "icons-flex icon-al-start",
-                  id: "",
-                },
-                {
-                  value: "flex-end",
-                  title: "End",
-                  className: "icons-flex icon-al-end",
-                  id: "",
-                },
-                {
-                  value: "stretch",
-                  title: "Stretch",
-                  className: "icons-flex icon-al-str",
-                  id: "",
-                },
-                {
-                  value: "center",
-                  title: "Center",
-                  className: "icons-flex icon-al-center",
-                  id: "",
-                },
-              ],
-            },
-            {
-              name: "Flex Children",
-              property: "label-parent-flex",
-              type: "integer",
-            },
-            {
-              name: "Order",
-              property: "order",
-              type: "integer",
-              // @ts-ignore
-              defaults: 0,
-              min: 0,
-            },
-            {
-              name: "Flex",
-              property: "flex",
-              type: "composite",
-              properties: [
-                {
-                  name: "Grow",
-                  property: "flex-grow",
-                  type: "integer",
-                  // @ts-ignore
-                  defaults: 0,
-                  min: 0,
-                },
-                {
-                  name: "Shrink",
-                  property: "flex-shrink",
-                  type: "integer",
-                  // @ts-ignore
-                  defaults: 0,
-                  min: 0,
-                },
-                {
-                  name: "Basis",
-                  property: "flex-basis",
-                  type: "integer",
-                  units: ["px", "%", ""],
-                  unit: "",
-                  defaults: "auto",
-                },
-              ],
-            },
-            {
-              name: "Align",
-              property: "align-self",
-              type: "radio",
-              defaults: "auto",
-              list: [
-                {
-                  value: "auto",
-                  name: "Auto",
-                  id: "",
-                },
-                {
-                  value: "flex-start",
-                  title: "Start",
-                  className: "icons-flex icon-al-start",
-                  id: "",
-                },
-                {
-                  value: "flex-end",
-                  title: "End",
-                  className: "icons-flex icon-al-end",
-                  id: "",
-                },
-                {
-                  value: "stretch",
-                  title: "Stretch",
-                  className: "icons-flex icon-al-str",
-                  id: "",
-                },
-                {
-                  value: "center",
-                  title: "Center",
-                  className: "icons-flex icon-al-center",
-                  id: "",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  });
-
-  editor.I18n.addMessages({
-    en: {
-      styleManager: {
-        properties: {
-          "background-repeat": "Repeat",
-          "background-position": "Position",
-          "background-attachment": "Attachment",
-          "background-size": "Size",
-        },
-      },
-    },
-  });
-
-  var pn = editor.Panels;
-  var modal = editor.Modal;
-  var cmdm = editor.Commands;
-
-  pn.getPanels().reset([
-        {
-          id: 'commands',
-          buttons: [{}],
-        },
-        {
-          id: 'devices-c',
-          buttons: [
-            {
-              id: "set-device-desktop",
-              command: "set-device-desktop",
-              active: true,
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-                <path fill="currentColor" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" />
-            </svg>`,
-            },
-            {
-              id: "set-device-tablet",
-              command: "set-device-tablet",
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-                <path fill="currentColor" d="M19,18H5V6H19M21,4H3C1.89,4 1,4.89 1,6V18A2,2 0 0,0 3,20H21A2,2 0 0,0 23,18V6C23,4.89 22.1,4 21,4Z" />
-            </svg>`,
-            },
-            {
-              id: "set-device-mobile",
-              command: "set-device-mobile",
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-                <path fill="currentColor" d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z" />
-            </svg>`,
-            },
-          ],
-        },
-        {
-          id: 'options',
-          buttons: [
-            {
-              id: 'undo',
-              command: () => editor.runCommand('core:undo'),
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-                <path fill="currentColor" d="M20 13.5C20 17.09 17.09 20 13.5 20H6V18H13.5C16 18 18 16 18 13.5S16 9 13.5 9H7.83L10.91 12.09L9.5 13.5L4 8L9.5 2.5L10.92 3.91L7.83 7H13.5C17.09 7 20 9.91 20 13.5Z" />
-            </svg>`,
-            },
-            {
-              id: 'redo',
-              command: () => editor.runCommand('core:redo'),
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-                <path fill="currentColor" d="M10.5 18H18V20H10.5C6.91 20 4 17.09 4 13.5S6.91 7 10.5 7H16.17L13.08 3.91L14.5 2.5L20 8L14.5 13.5L13.09 12.09L16.17 9H10.5C8 9 6 11 6 13.5S8 18 10.5 18Z" />
-            </svg>`,
-            },
-            {
-              id: "canvas-clear",
-              command: () => editor.runCommand("canvas-clear"),
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-                  <path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
-              </svg>`,
-            },
-          ],
-        },
-        {
-          id: 'views',
-          buttons: [
-            {
-              id: osm,
-              command: osm,
-              active: true,
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-                <path fill="currentColor" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z" />
-            </svg>`,
-            },
-            {
-              id: otm,
-              command: otm,
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-              <path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
-          </svg>`,
-            },
-            {
-              id: ola,
-              command: ola,
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-              <path fill="currentColor" d="M12,16L19.36,10.27L21,9L12,2L3,9L4.63,10.27M12,18.54L4.62,12.81L3,14.07L12,21.07L21,14.07L19.37,12.8L12,18.54Z" />
-          </svg>`,
-            },
-            {
-              id: obl,
-              command: obl,
-              label: `<svg ${iconStyle} viewBox="0 0 24 24">
-              <path fill="currentColor" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" />
-          </svg>`,
-            },
-          ]
-        },
-      ])
-
-  // Update canvas-clear command
-  cmdm.add("canvas-clear", function () {
-    if (confirm("Are you sure to clean the canvas?")) {
-      editor.runCommand("core:canvas-clear");
-    }
-  });
-
-  // Simple warn notifier
-  var origWarn = console.warn;
-  console.warn = function (msg) {
-    if (msg.indexOf("[undefined]") == -1) {
-      toast({
-        title: "Warning",
-        type: "warning",
-        description: msg,
-      });
-    }
-    origWarn(msg);
-  };
-
-  // Add and beautify tooltips
-  [
-    ["sw-visibility", "Show Borders"],
-    ["preview", "Preview"],
-    ["fullscreen", "Fullscreen"],
-    ["export-template", "Export"],
-    ["undo", "Undo"],
-    ["redo", "Redo"],
-    ["gjs-open-import-webpage", "Import"],
-    ["canvas-clear", "Clear canvas"],
-  ].forEach(function (item) {
-    pn.getButton("options", item[0])?.set("attributes", {
-      title: item[1],
-      "data-tooltip-pos": "bottom",
-    });
-  });
-  [
-    ["open-sm", "Style Manager"],
-    ["open-layers", "Layers"],
-    ["open-blocks", "Blocks"],
-  ].forEach(function (item) {
-    pn.getButton("views", item[0])?.set("attributes", {
-      title: item[1],
-      "data-tooltip-pos": "bottom",
-    });
-  });
-  var titles = document.querySelectorAll("*[title]");
-
-  for (var i = 0; i < titles.length; i++) {
-    var el = titles[i];
-    var title = el.getAttribute("title");
-    title = title ? title.trim() : "";
-    if (!title) break;
-    el.setAttribute("data-tooltip", title);
-    el.setAttribute("title", "");
-  }
-
-  // Do stuff on load
-  editor.on("load", function () {
-    var $ = grapesjs.$;
-
-    // Load and show settings and style manager
-    var openTmBtn = pn.getButton("views", "open-tm");
-    openTmBtn && openTmBtn.set("active", 1);
-    var openSm = pn.getButton("views", "open-sm");
-    openSm && openSm.set("active", 1);
-
-    // Remove trait view
-    pn.removeButton("views", "open-tm");
-
-    // Add Settings Sector
-    var traitsSector = $(
-      '<div class="gjs-sm-sector no-select">' +
-        '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
-        '<div class="gjs-sm-properties" style="display: none;"></div></div>',
-    );
-    var traitsProps = traitsSector.find(".gjs-sm-properties");
-    traitsProps.append($(".gjs-traits-cs"));
-    $(".gjs-sm-sectors").before(traitsSector);
-    traitsSector.find(".gjs-sm-sector-title").on("click", function () {
-      var traitStyle = traitsProps.get(0).style;
-      var hidden = traitStyle.display == "none";
-      if (hidden) {
-        traitStyle.display = "block";
-      } else {
-        traitStyle.display = "none";
-      }
-    });
-
-    // Open block manager
-    var openBlocksBtn = editor.Panels.getButton("views", "open-blocks");
-    openBlocksBtn && openBlocksBtn.set("active", 1);
-  });
-
-</script>
-
-<style>
-  :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-</style>