@blockslides/extension-slide 0.1.0

package/LICENSE.md

@@ -0,0 +1,36 @@
+MIT License
+
+Copyright (c) 2025 BlockSlides
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+## Acknowledgments
+
+This project includes code and patterns adapted from [Tiptap](https://tiptap.dev),
+an open-source headless editor framework for web artisans.
+
+**Tiptap License:**
+
+- Copyright (c) 2025, Tiptap GmbH
+- Licensed under MIT License
+- Original source: https://github.com/ueberdosis/tiptap
+
+See `_tiptap/LICENSE.md` for the full Tiptap license.

package/dist/index.d.mts

@@ -0,0 +1,22 @@
+import { Node } from '@blockslides/core';
+
+interface SlideOptions {
+    /**
+     * The HTML attributes for a slide node.
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * Whether to inject CSS styles
+     * @default true
+     */
+    injectCSS: boolean;
+    /**
+     * Content Security Policy nonce
+     */
+    injectNonce?: string;
+}
+declare const Slide: Node<SlideOptions, any>;
+
+export { Slide };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import { Node } from '@blockslides/core';
+
+interface SlideOptions {
+    /**
+     * The HTML attributes for a slide node.
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * Whether to inject CSS styles
+     * @default true
+     */
+    injectCSS: boolean;
+    /**
+     * Content Security Policy nonce
+     */
+    injectNonce?: string;
+}
+declare const Slide: Node<SlideOptions, any>;
+
+export { Slide };

package/dist/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Slide: () => Slide
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/slide.ts
+var import_core = require("@blockslides/core");
+var import_state = require("@blockslides/pm/state");
+var slideStyles = `
+.slide {
+  height: var(--slide-height, 100%);
+  min-height: var(--slide-min-height, 250px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--slide-bg);
+  border-radius: var(--slide-border-radius);
+  box-shadow: var(--slide-shadow);
+  margin-bottom: var(--slide-margin-bottom);
+}
+`;
+var SlidePluginKey = new import_state.PluginKey("slide");
+var Slide = import_core.Node.create({
+  name: "slide",
+  isolating: true,
+  content: "row+",
+  group: "slide",
+  defining: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      injectCSS: true,
+      injectNonce: void 0
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div.slide" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      (0, import_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
+        class: "slide",
+        "data-node-type": "slide"
+      }),
+      0
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [
+      new import_state.Plugin({
+        key: SlidePluginKey,
+        state: {
+          init: () => {
+            if (this.options.injectCSS && typeof document !== "undefined") {
+              (0, import_core.createStyleTag)(slideStyles, this.options.injectNonce, "slide");
+            }
+            return {};
+          },
+          apply: (_tr, pluginState) => pluginState
+        }
+      })
+    ];
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slide
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/slide.ts"],"sourcesContent":["export { Slide } from \"./slide\";\n","import { Node, mergeAttributes, createStyleTag } from \"@blockslides/core\";\nimport { Plugin, PluginKey } from \"@blockslides/pm/state\";\n\nconst slideStyles = `\n.slide {\n  height: var(--slide-height, 100%);\n  min-height: var(--slide-min-height, 250px);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background-color: var(--slide-bg);\n  border-radius: var(--slide-border-radius);\n  box-shadow: var(--slide-shadow);\n  margin-bottom: var(--slide-margin-bottom);\n}\n`;\n\nexport interface SlideOptions {\n  /**\n   * The HTML attributes for a slide node.\n   * @default {}\n   * @example { class: 'foo' }\n   */\n  HTMLAttributes: Record<string, any>;\n  /**\n   * Whether to inject CSS styles\n   * @default true\n   */\n  injectCSS: boolean;\n  /**\n   * Content Security Policy nonce\n   */\n  injectNonce?: string;\n}\n\nconst SlidePluginKey = new PluginKey(\"slide\");\n\nexport const Slide = Node.create<SlideOptions>({\n  name: \"slide\",\n  isolating: true,\n  content: \"row+\",\n\n  group: \"slide\",\n\n  defining: true,\n\n  addOptions() {\n    return {\n      HTMLAttributes: {},\n      injectCSS: true,\n      injectNonce: undefined,\n    };\n  },\n\n  parseHTML() {\n    return [{ tag: \"div.slide\" }];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\n      \"div\",\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {\n        class: \"slide\",\n        \"data-node-type\": \"slide\",\n      }),\n      0,\n    ];\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: SlidePluginKey,\n        state: {\n          init: () => {\n            if (this.options.injectCSS && typeof document !== \"undefined\") {\n              createStyleTag(slideStyles, this.options.injectNonce, \"slide\");\n            }\n            return {};\n          },\n          apply: (_tr, pluginState: Record<string, never>) => pluginState,\n        },\n      }),\n    ];\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsD;AACtD,mBAAkC;AAElC,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCpB,IAAM,iBAAiB,IAAI,uBAAU,OAAO;AAErC,IAAM,QAAQ,iBAAK,OAAqB;AAAA,EAC7C,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,UAAU;AAAA,EAEV,aAAa;AACX,WAAO;AAAA,MACL,gBAAgB,CAAC;AAAA,MACjB,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,YAAY;AACV,WAAO,CAAC,EAAE,KAAK,YAAY,CAAC;AAAA,EAC9B;AAAA,EAEA,WAAW,EAAE,eAAe,GAAG;AAC7B,WAAO;AAAA,MACL;AAAA,UACA,6BAAgB,KAAK,QAAQ,gBAAgB,gBAAgB;AAAA,QAC3D,OAAO;AAAA,QACP,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD;AAAA,IACF;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,WAAO;AAAA,MACL,IAAI,oBAAO;AAAA,QACT,KAAK;AAAA,QACL,OAAO;AAAA,UACL,MAAM,MAAM;AACV,gBAAI,KAAK,QAAQ,aAAa,OAAO,aAAa,aAAa;AAC7D,8CAAe,aAAa,KAAK,QAAQ,aAAa,OAAO;AAAA,YAC/D;AACA,mBAAO,CAAC;AAAA,UACV;AAAA,UACA,OAAO,CAAC,KAAK,gBAAuC;AAAA,QACtD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,64 @@
+// src/slide.ts
+import { Node, mergeAttributes, createStyleTag } from "@blockslides/core";
+import { Plugin, PluginKey } from "@blockslides/pm/state";
+var slideStyles = `
+.slide {
+  height: var(--slide-height, 100%);
+  min-height: var(--slide-min-height, 250px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--slide-bg);
+  border-radius: var(--slide-border-radius);
+  box-shadow: var(--slide-shadow);
+  margin-bottom: var(--slide-margin-bottom);
+}
+`;
+var SlidePluginKey = new PluginKey("slide");
+var Slide = Node.create({
+  name: "slide",
+  isolating: true,
+  content: "row+",
+  group: "slide",
+  defining: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      injectCSS: true,
+      injectNonce: void 0
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div.slide" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        class: "slide",
+        "data-node-type": "slide"
+      }),
+      0
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: SlidePluginKey,
+        state: {
+          init: () => {
+            if (this.options.injectCSS && typeof document !== "undefined") {
+              createStyleTag(slideStyles, this.options.injectNonce, "slide");
+            }
+            return {};
+          },
+          apply: (_tr, pluginState) => pluginState
+        }
+      })
+    ];
+  }
+});
+export {
+  Slide
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slide.ts"],"sourcesContent":["import { Node, mergeAttributes, createStyleTag } from \"@blockslides/core\";\nimport { Plugin, PluginKey } from \"@blockslides/pm/state\";\n\nconst slideStyles = `\n.slide {\n  height: var(--slide-height, 100%);\n  min-height: var(--slide-min-height, 250px);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background-color: var(--slide-bg);\n  border-radius: var(--slide-border-radius);\n  box-shadow: var(--slide-shadow);\n  margin-bottom: var(--slide-margin-bottom);\n}\n`;\n\nexport interface SlideOptions {\n  /**\n   * The HTML attributes for a slide node.\n   * @default {}\n   * @example { class: 'foo' }\n   */\n  HTMLAttributes: Record<string, any>;\n  /**\n   * Whether to inject CSS styles\n   * @default true\n   */\n  injectCSS: boolean;\n  /**\n   * Content Security Policy nonce\n   */\n  injectNonce?: string;\n}\n\nconst SlidePluginKey = new PluginKey(\"slide\");\n\nexport const Slide = Node.create<SlideOptions>({\n  name: \"slide\",\n  isolating: true,\n  content: \"row+\",\n\n  group: \"slide\",\n\n  defining: true,\n\n  addOptions() {\n    return {\n      HTMLAttributes: {},\n      injectCSS: true,\n      injectNonce: undefined,\n    };\n  },\n\n  parseHTML() {\n    return [{ tag: \"div.slide\" }];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\n      \"div\",\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {\n        class: \"slide\",\n        \"data-node-type\": \"slide\",\n      }),\n      0,\n    ];\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: SlidePluginKey,\n        state: {\n          init: () => {\n            if (this.options.injectCSS && typeof document !== \"undefined\") {\n              createStyleTag(slideStyles, this.options.injectNonce, \"slide\");\n            }\n            return {};\n          },\n          apply: (_tr, pluginState: Record<string, never>) => pluginState,\n        },\n      }),\n    ];\n  },\n});\n"],"mappings":";AAAA,SAAS,MAAM,iBAAiB,sBAAsB;AACtD,SAAS,QAAQ,iBAAiB;AAElC,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCpB,IAAM,iBAAiB,IAAI,UAAU,OAAO;AAErC,IAAM,QAAQ,KAAK,OAAqB;AAAA,EAC7C,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,UAAU;AAAA,EAEV,aAAa;AACX,WAAO;AAAA,MACL,gBAAgB,CAAC;AAAA,MACjB,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,YAAY;AACV,WAAO,CAAC,EAAE,KAAK,YAAY,CAAC;AAAA,EAC9B;AAAA,EAEA,WAAW,EAAE,eAAe,GAAG;AAC7B,WAAO;AAAA,MACL;AAAA,MACA,gBAAgB,KAAK,QAAQ,gBAAgB,gBAAgB;AAAA,QAC3D,OAAO;AAAA,QACP,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD;AAAA,IACF;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,WAAO;AAAA,MACL,IAAI,OAAO;AAAA,QACT,KAAK;AAAA,QACL,OAAO;AAAA,UACL,MAAM,MAAM;AACV,gBAAI,KAAK,QAAQ,aAAa,OAAO,aAAa,aAAa;AAC7D,6BAAe,aAAa,KAAK,QAAQ,aAAa,OAAO;AAAA,YAC/D;AACA,mBAAO,CAAC;AAAA,UACV;AAAA,UACA,OAAO,CAAC,KAAK,gBAAuC;AAAA,QACtD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@blockslides/extension-slide",
+  "version": "0.1.0",
+  "description": "Slide node extension for BlockSlides slide editor",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "blockslides",
+    "blockslides extension",
+    "slide"
+  ],
+  "peerDependencies": {
+    "@blockslides/core": "^0.1.0",
+    "@blockslides/pm": "^0.1.0"
+  },
+  "dependencies": {
+    "@blockslides/core": "^0.1.0",
+    "@blockslides/pm": "^0.1.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  },
+  "author": "keivanmojmali",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { Slide } from "./slide";

package/src/slide.ts

@@ -0,0 +1,86 @@
+import { Node, mergeAttributes, createStyleTag } from "@blockslides/core";
+import { Plugin, PluginKey } from "@blockslides/pm/state";
+
+const slideStyles = `
+.slide {
+  height: var(--slide-height, 100%);
+  min-height: var(--slide-min-height, 250px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--slide-bg);
+  border-radius: var(--slide-border-radius);
+  box-shadow: var(--slide-shadow);
+  margin-bottom: var(--slide-margin-bottom);
+}
+`;
+
+export interface SlideOptions {
+  /**
+   * The HTML attributes for a slide node.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, any>;
+  /**
+   * Whether to inject CSS styles
+   * @default true
+   */
+  injectCSS: boolean;
+  /**
+   * Content Security Policy nonce
+   */
+  injectNonce?: string;
+}
+
+const SlidePluginKey = new PluginKey("slide");
+
+export const Slide = Node.create<SlideOptions>({
+  name: "slide",
+  isolating: true,
+  content: "row+",
+
+  group: "slide",
+
+  defining: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      injectCSS: true,
+      injectNonce: undefined,
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "div.slide" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        class: "slide",
+        "data-node-type": "slide",
+      }),
+      0,
+    ];
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: SlidePluginKey,
+        state: {
+          init: () => {
+            if (this.options.injectCSS && typeof document !== "undefined") {
+              createStyleTag(slideStyles, this.options.injectNonce, "slide");
+            }
+            return {};
+          },
+          apply: (_tr, pluginState: Record<string, never>) => pluginState,
+        },
+      }),
+    ];
+  },
+});

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts", "src/slide.css"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  loader: {
+    ".css": "copy",
+  },
+});