144 lines
5.7 KiB
TypeScript
144 lines
5.7 KiB
TypeScript
import type { AddComponentTypeOptions, BlockProperties, Editor } from "grapesjs";
|
|
|
|
export function configureEditor(editor: Editor): void {
|
|
//editor.Panels.getPanel("devices-c")?.set("visible", false);
|
|
editor.Panels.removeButton("devices-c", "set-device-mobile");
|
|
editor.Panels.removeButton("devices-c", "set-device-desktop");
|
|
editor.Panels.removeButton("views", "open-tm");
|
|
editor.Panels.removeButton("views", "open-layers");
|
|
editor.Panels.removeButton("options", "export-template");
|
|
editor.Panels.removeButton("options", "preview");
|
|
// editor.Panels.removeButton("options", "fullscreen");
|
|
editor.Panels.removeButton("options", "gjs-open-import-template");
|
|
editor.Panels.removeButton("options", "gjs-toggle-images");
|
|
editor.BlockManager.remove("button");
|
|
editor.BlockManager.remove("image");
|
|
editor.BlockManager.remove("link-block");
|
|
editor.BlockManager.remove("list-items");
|
|
editor.BlockManager.remove("grid-items");
|
|
editor.BlockManager.remove("sect37");
|
|
editor.BlockManager.remove("text-sect");
|
|
|
|
editor.BlockManager.get("text").set("category", "Text");
|
|
editor.BlockManager.get("quote").set("category", "Text");
|
|
editor.BlockManager.get("link").set("category", "Text");
|
|
editor.BlockManager.get("sect100").set("category", "Struktur");
|
|
editor.BlockManager.get("sect50").set("category", "Struktur");
|
|
editor.BlockManager.get("sect30").set("category", "Struktur");
|
|
editor.BlockManager.get("divider").set("category", "Struktur");
|
|
editor.BlockManager.add("heading1-block", heading1_block);
|
|
editor.BlockManager.add("heading2-block", heading2_block);
|
|
editor.BlockManager.add("heading3-block", heading3_block);
|
|
editor.BlockManager.add("list_start", list_start_block);
|
|
editor.DomComponents.addType("list_end", list_end_block.type);
|
|
editor.BlockManager.add("list_end", list_end_block.block);
|
|
editor.BlockManager.add("list-block", list_block);
|
|
editor.BlockManager.add("list-inner-block", list_inner_block);
|
|
}
|
|
|
|
const heading1_block: BlockProperties = {
|
|
label: "Heading1",
|
|
category: "Text",
|
|
media: `
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25" />
|
|
</svg>
|
|
`,
|
|
content: `
|
|
<h1 class="heading">Heading 1</h1>
|
|
`,
|
|
};
|
|
|
|
const heading2_block: BlockProperties = {
|
|
label: "Heading2",
|
|
category: "Text",
|
|
media: `
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
|
|
</svg>
|
|
`,
|
|
content: `
|
|
<h2 class="heading">Heading 2</h2>
|
|
`,
|
|
};
|
|
|
|
const heading3_block: BlockProperties = {
|
|
label: "Heading3",
|
|
category: "Text",
|
|
media: `
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
|
|
</svg>
|
|
`,
|
|
content: `
|
|
<h3 class="heading">Heading 3</h3>
|
|
`,
|
|
};
|
|
|
|
const list_start_block: BlockProperties = {
|
|
label: "Anfang WDH",
|
|
category: "Struktur",
|
|
media: `
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
|
|
</svg>
|
|
`,
|
|
content: `
|
|
<liststart style="font-style: italic; display: block;">
|
|
WDH Start: LISTENNAME
|
|
</liststart>
|
|
`,
|
|
};
|
|
|
|
const list_end_block: { type: AddComponentTypeOptions; block: BlockProperties } = {
|
|
type: {
|
|
model: {
|
|
defaults: {
|
|
tagName: "listend",
|
|
content: "WDH ENDE",
|
|
editable: false,
|
|
},
|
|
},
|
|
isComponent(el) {
|
|
return el.tagName === "listend";
|
|
},
|
|
},
|
|
block: {
|
|
label: "Ende WDH",
|
|
content: { type: "list_end" },
|
|
category: "Struktur",
|
|
media: `
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
|
</svg>
|
|
`,
|
|
},
|
|
};
|
|
|
|
const list_block: BlockProperties = {
|
|
label: "Liste",
|
|
category: "Struktur",
|
|
media: `
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
|
</svg>
|
|
`,
|
|
content: `
|
|
<ul>
|
|
<li>Element</li>
|
|
</ul>
|
|
`,
|
|
};
|
|
|
|
const list_inner_block: BlockProperties = {
|
|
label: "Listenelement",
|
|
category: "Text",
|
|
media: `
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
|
</svg>
|
|
`,
|
|
content: `
|
|
<li>Element</li>
|
|
`,
|
|
};
|