Declare plugin options

Author: artf

README.md

@@ -24,7 +24,6 @@ This plugin adds the possibility to embed custom code
 
 |Option|Description|Default|
 |-|-|-
-| `blockLabel` | Label of the custom code block | `Custom Code` |
 | `blockCustomCode` | Object to extend the default custom code block, eg. `{ label: 'Custom Code', category: 'Extra', ... }`. Pass a falsy value to avoid adding the block | `{}` |
 | `propsCustomCode` | Object to extend the default custom code properties, eg. `{ name: 'Custom Code', droppable: false, ... }` | `{}` |
 | `placeholderContent` | Initial content of the custom code component | `<span>Insert here your custom code</span>` |

src/blocks.js renamed to src/blocks.ts

@@ -1,14 +1,17 @@
+import type grapesjs from 'grapesjs';
 import { typeCustomCode } from './utils';
 
-export default (editor, opts = {}) => {
-  const bm = editor.BlockManager;
-  const { blockCustomCode, blockLabel } = opts;
+export default (editor: grapesjs.Editor, opts = {}) => {
+  const { Blocks } = editor;
+  const { blockCustomCode } = opts;
 
-  blockCustomCode && bm.add(typeCustomCode, {
-    label: `<svg viewBox="0 0 24 24">
+  blockCustomCode && Blocks.add(typeCustomCode, {
+    label: 'Custom Code',
+    media: `
+      <svg viewBox="0 0 24 24">
         <path d="M14.6 16.6l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4z"></path>
       </svg>
-      <div>${blockLabel}</div>`,
+    `,
     category: 'Extra',
     activate: true,
     select: true,

src/index.js

@@ -0,0 +1,93 @@
+import type grapesjs from 'grapesjs';
+import loadComponents from './components';
+import loadBlocks from './blocks';
+import loadCommands from './commands';
+
+export type PluginOptions = {
+  /**
+   * Object to extend the default custom code block. Pass a falsy value to avoid adding the block
+   * @example
+   * { label: 'Custom Code', category: 'Extra', ... }
+   */
+   blockCustomCode?: Partial<grapesjs.BlockOptions>;
+
+  /**
+   * Object to extend the default custom code properties.
+   * @example
+   * { name: 'Custom Code', droppable: false, ... }
+   */
+   propsCustomCode?: grapesjs.ComponentDefinition;
+
+  /**
+   * Initial content of the custom code component
+   * @default '<span>Insert here your custom code</span>'
+   */
+   placeholderContent?: string;
+
+  /**
+   * Object to extend the default component's toolbar button for the code. Pass a falsy value to avoid adding the button
+   * @example
+   * { label: '</>', attributes: { title: 'Open custom code' } }
+   */
+   toolbarBtnCustomCode?: Record<string, any>;
+
+   /**
+    * Content to show when the custom code contains `<script>`
+    */
+   placeholderScript?: string;
+
+   /**
+    * Title for the custom code modal
+    * @default 'Insert your code'
+    */
+   modalTitle?: string;
+
+   /**
+    * Additional options for the code viewer.
+    * @example
+    * { theme: 'hopscotch', readOnly: 0 }
+    */
+   codeViewOptions?: Record<string, any>;
+
+   /**
+    * Label for the default save button
+    * @default 'Save'
+    */
+    buttonLabel?: string;
+
+    /**
+     * Object to extend the default custom code command.
+     */
+    commandCustomCode?: Record<string, any>;
+};
+
+const plugin: grapesjs.Plugin<PluginOptions> = (editor, opts = {}) => {
+  const options: PluginOptions = {
+    blockCustomCode: {},
+    propsCustomCode: {},
+    placeholderContent: '<span>Insert here your custom code</span>',
+    toolbarBtnCustomCode: {},
+    placeholderScript: `<div style="pointer-events: none; padding: 10px;">
+      <svg viewBox="0 0 24 24" style="height: 30px; vertical-align: middle;">
+        <path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"></path>
+        </svg>
+      Custom code with <i>&lt;script&gt;</i> can't be rendered on the canvas
+    </div>`,
+    modalTitle: 'Insert your code',
+    codeViewOptions: {},
+    buttonLabel: 'Save',
+    commandCustomCode: {},
+    ...opts
+  };
+
+  // Add components
+  loadComponents(editor, options);
+
+  // Add blocks
+  loadBlocks(editor, options);
+
+  // Add commands
+  loadCommands(editor, options);
+};
+
+export default plugin;

src/index.ts

@@ -0,0 +1,4 @@
+{
+    "extends": "./node_modules/grapesjs-cli/src/template/tsconfig.json",
+    "include": ["src"]
+}