refactor: move components and hooks to a different package

package.json

@@ -89,6 +89,10 @@
     "react-i18next": "^14.1.1",
     "react-router-dom": "^6.3.0",
     "serve": "^14.2.4",
+    "slate": "^0.112.0",
+    "slate-dom": "^0.112.2",
+    "slate-history": "^0.110.3",
+    "slate-react": "^0.112.1",
     "storybook": "^8.4.7",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.15.0",

packages/editor-components/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@ndla/editor-components",
+  "version": "0.0.1",
+  "description": "Slate editor components for NDLA",
+  "license": "GPL-3.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "node ../../scripts/build.js package",
+    "build:types": "tsc -p tsconfig.build.json",
+    "prepublish": "concurrently 'yarn build:types'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NDLANO/frontend-packages.git",
+    "directory": "packages/editor-components"
+  },
+  "keywords": [
+    "editor",
+    "slate",
+    "ndla"
+  ],
+  "author": "[email protected]",
+  "files": [
+    "lib",
+    "src",
+    "es",
+    "types"
+  ],
+  "dependencies": {
+    "@ndla/editor": "workspace:^",
+    "@ndla/primitives": "workspace:^"
+  },
+  "peerDependencies": {
+    "react": ">= 18",
+    "react-dom": ">= 18",
+    "slate": "^0.112.0",
+    "slate-dom": "^0.111.0",
+    "slate-history": "^0.110.3",
+    "slate-react": "^0.112.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "ebeb8a1d86cba369e1156719ebaecb58a6e2cdfc"
+}

packages/editor/src/plugins/list/hooks/useListToolbarButton.ts → packages/editor-components/src/hooks/useListToolbarButton.ts

@@ -8,9 +8,7 @@
 
 import type { MouseEvent } from "react";
 import { useSlate } from "slate-react";
-import type { ListType } from "../listTypes";
-import { isListElement } from "../queries/listElementQueries";
-import { toggleList } from "../transforms/toggleList";
+import { isListElement, type ListType, toggleList } from "@ndla/editor";
 
 interface ListToolbarButtonStateOptions {
   type: ListType;

packages/editor/src/plugins/mark/hooks/useMarkToolbarButton.ts → packages/editor-components/src/hooks/useMarkToolbarButton.ts

@@ -6,10 +6,10 @@
  *
  */
 
+import { toggleMark } from "@ndla/editor";
 import type { MouseEvent } from "react";
 import type { EditorMarks } from "slate";
 import { useSlate } from "slate-react";
-import { toggleMark } from "../toggleMark";
 
 interface MarkToolbarButtonStateOptions {
   type: keyof EditorMarks;

packages/editor-components/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export { useEditorPopover } from "./hooks/useEditorPopover";
+export { useListToolbarButton, useListToolbarButtonState } from "./hooks/useListToolbarButton";
+export { useMarkToolbarButton, useMarkToolbarButtonState } from "./hooks/useMarkToolbarButton";

packages/editor-components/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "declarationDir": "./lib",
+    "rootDir": "./src"
+  },
+  "include": ["./src"]
+}

packages/editor/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/editor",
   "version": "0.0.1",
-  "description": "Slate editor components for NDLA",
+  "description": "Slate editor plugins for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -34,16 +34,16 @@
     "he": "^1.2.0",
     "is-hotkey": "^0.2.0",
     "lodash.mergewith": "^4.6.2",
+    "slate-hyperscript": "^0.100.0"
+  },
+  "peerDependencies": {
+    "react": ">= 18",
+    "react-dom": ">= 18",
     "slate": "^0.112.0",
     "slate-dom": "^0.111.0",
     "slate-history": "^0.110.3",
-    "slate-hyperscript": "^0.100.0",
     "slate-react": "^0.112.0"
   },
-  "peerDependencies": {
-    "react": ">= 18",
-    "react-dom": ">= 18"
-  },
   "devDependencies": {
     "@types/he": "^1.2.3",
     "@types/is-hotkey": "^0",

packages/editor/src/index.ts

@@ -29,8 +29,6 @@ export { createSlate, withPlugins, withRenderers } from "./editor/createSlate";
 export { withLogger } from "./editor/logger/withLogger";
 export { LoggerManager, type LoggerOptions, loggerManager } from "./editor/logger/Logger";
 
-export { useEditorPopover } from "./hooks/useEditorPopover";
-
 export { breakPlugin } from "./plugins/break/breakPlugin";
 export { breakSerializer } from "./plugins/break/breakSerializer";
 export { BREAK_ELEMENT_TYPE, BREAK_PLUGIN, SOFT_BREAK_PLUGIN } from "./plugins/break/breakTypes";
@@ -71,7 +69,6 @@ export type {
 export { LIST_ELEMENT_TYPE, LIST_ITEM_ELEMENT_TYPE, LIST_TYPES, LIST_PLUGIN } from "./plugins/list/listTypes";
 export { isListElement, isListItemElement } from "./plugins/list/queries/listElementQueries";
 export { toggleList } from "./plugins/list/transforms/toggleList";
-export { useListToolbarButton, useListToolbarButtonState } from "./plugins/list/hooks/useListToolbarButton";
 export { listOnBackspace } from "./plugins/list/handlers/listOnBackspace";
 export { listOnEnter } from "./plugins/list/handlers/listOnEnter";
 export { listOnTab } from "./plugins/list/handlers/listOnTab";
@@ -81,7 +78,6 @@ export { markSerializer } from "./plugins/mark/markSerializer";
 export type { CustomText, MarkType } from "./plugins/mark/markTypes";
 export { marks, MARK_PLUGIN } from "./plugins/mark/markTypes";
 export { toggleMark } from "./plugins/mark/toggleMark";
-export { useMarkToolbarButton, useMarkToolbarButtonState } from "./plugins/mark/hooks/useMarkToolbarButton";
 
 export { paragraphPlugin } from "./plugins/paragraph/paragraphPlugin";
 export { paragraphSerializer } from "./plugins/paragraph/paragraphSerializer";

packages/editor/src/playground.stories.tsx

@@ -13,6 +13,13 @@ import { DOMEditor } from "slate-dom";
 import { Editable, Slate, useSlate, type RenderElementProps } from "slate-react";
 import { Portal } from "@ark-ui/react";
 import type { Meta, StoryFn } from "@storybook/react";
+import {
+  useEditorPopover,
+  useListToolbarButton,
+  useListToolbarButtonState,
+  useMarkToolbarButton,
+  useMarkToolbarButtonState,
+} from "@ndla/editor-components";
 import {
   Bold,
   CodeView,
@@ -37,18 +44,15 @@ import {
 } from "@ndla/primitives";
 import { createSlate } from "./editor/createSlate";
 import { LoggerManager } from "./editor/logger/Logger";
-import { useEditorPopover } from "./hooks/useEditorPopover";
 import { breakPlugin } from "./plugins/break/breakPlugin";
 import { softBreakPlugin } from "./plugins/break/softBreakPlugin";
 import { headingPlugin } from "./plugins/heading/headingPlugin";
 import { toggleHeading } from "./plugins/heading/transforms/toggleHeading";
 import { linkPlugin } from "./plugins/link/linkPlugin";
 import { type LinkElement } from "./plugins/link/linkTypes";
-import { useListToolbarButton, useListToolbarButtonState } from "./plugins/list/hooks/useListToolbarButton";
 import { listPlugin } from "./plugins/list/listPlugin";
 import type { ListType } from "./plugins/list/listTypes";
 import { toggleList } from "./plugins/list/transforms/toggleList";
-import { useMarkToolbarButton, useMarkToolbarButtonState } from "./plugins/mark/hooks/useMarkToolbarButton";
 import { markPlugin } from "./plugins/mark/markPlugin";
 import { marks } from "./plugins/mark/markTypes";
 import { toggleMark } from "./plugins/mark/toggleMark";

tsconfig.json

@@ -21,6 +21,8 @@
       "@ndla/article-converter": ["./packages/article-converter/src"],
       "@ndla/audio-search": ["./packages/ndla-audio-search/src"],
       "@ndla/core": ["./packages/core/src"],
+      "@ndla/editor": ["./packages/editor/src"],
+      "@ndla/editor-components": ["./packages/editor-components/src"],
       "@ndla/error-reporter": ["./packages/ndla-error-reporter/src"],
       "@ndla/hooks": ["./packages/hooks/src"],
       "@ndla/icons": ["./packages/icons/src"],

yarn.lock

@@ -2419,7 +2419,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@ndla/editor@workspace:packages/editor":
+"@ndla/editor-components@workspace:packages/editor-components":
+  version: 0.0.0-use.local
+  resolution: "@ndla/editor-components@workspace:packages/editor-components"
+  dependencies:
+    "@ndla/editor": "workspace:^"
+    "@ndla/primitives": "workspace:^"
+  peerDependencies:
+    react: ">= 18"
+    react-dom: ">= 18"
+    slate: ^0.112.0
+    slate-dom: ^0.111.0
+    slate-history: ^0.110.3
+    slate-react: ^0.112.0
+  languageName: unknown
+  linkType: soft
+
+"@ndla/editor@workspace:^, @ndla/editor@workspace:packages/editor":
   version: 0.0.0-use.local
   resolution: "@ndla/editor@workspace:packages/editor"
   dependencies:
@@ -2430,14 +2446,14 @@ __metadata:
     he: "npm:^1.2.0"
     is-hotkey: "npm:^0.2.0"
     lodash.mergewith: "npm:^4.6.2"
-    slate: "npm:^0.112.0"
-    slate-dom: "npm:^0.111.0"
-    slate-history: "npm:^0.110.3"
     slate-hyperscript: "npm:^0.100.0"
-    slate-react: "npm:^0.112.0"
   peerDependencies:
     react: ">= 18"
     react-dom: ">= 18"
+    slate: ^0.112.0
+    slate-dom: ^0.111.0
+    slate-history: ^0.110.3
+    slate-react: ^0.112.0
   languageName: unknown
   linkType: soft
 
@@ -9373,6 +9389,10 @@ __metadata:
     react-i18next: "npm:^14.1.1"
     react-router-dom: "npm:^6.3.0"
     serve: "npm:^14.2.4"
+    slate: "npm:^0.112.0"
+    slate-dom: "npm:^0.112.2"
+    slate-history: "npm:^0.110.3"
+    slate-react: "npm:^0.112.1"
     storybook: "npm:^8.4.7"
     typescript: "npm:^5.7.2"
     typescript-eslint: "npm:^8.15.0"
@@ -14521,9 +14541,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slate-dom@npm:^0.111.0":
-  version: 0.111.0
-  resolution: "slate-dom@npm:0.111.0"
+"slate-dom@npm:^0.112.2":
+  version: 0.112.2
+  resolution: "slate-dom@npm:0.112.2"
   dependencies:
     "@juggle/resize-observer": "npm:^3.4.0"
     direction: "npm:^1.0.4"
@@ -14534,7 +14554,7 @@ __metadata:
     tiny-invariant: "npm:1.3.1"
   peerDependencies:
     slate: ">=0.99.0"
-  checksum: 10c0/e803f154f89302b48bb344720560442f631e0a56468243c8d256ca909bdd10ea7afb1ad5637af8f775d0409d1e7c44faa4d0640ce8e30731a3657e52d3a9a55b
+  checksum: 10c0/e2f2df40468a9c025467d32d69916e427297e8bd8b192863ff03cb5747bec66d3bcf599afc0a07dc1c9225f92bfeb414b9607d4f8e229a6c6df4d806558af851
   languageName: node
   linkType: hard
 
@@ -14560,9 +14580,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slate-react@npm:^0.112.0":
-  version: 0.112.0
-  resolution: "slate-react@npm:0.112.0"
+"slate-react@npm:^0.112.1":
+  version: 0.112.1
+  resolution: "slate-react@npm:0.112.1"
   dependencies:
     "@juggle/resize-observer": "npm:^3.4.0"
     direction: "npm:^1.0.4"
@@ -14576,7 +14596,7 @@ __metadata:
     react-dom: ">=18.2.0"
     slate: ">=0.99.0"
     slate-dom: ">=0.110.2"
-  checksum: 10c0/2d9b88e68f9b6dd17a82551f0e68d30a80e42919076e057c7cb5d512a975ad8f641f575ea20cb64cd498016b23ffb467bb447946b88feee24c703777ef0ba79b
+  checksum: 10c0/5d53f037d75323f21733ba8a6d2afa860ccb20bbc28591e30ca8a32e1080436ab6796bb667cdf2c7292ac52dedc8680e9977b913ebd9fef808cefdf5a94e0af1
   languageName: node
   linkType: hard