Merge branch 'master' into develop

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: true
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.4.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.12](https://github.com/p3ol/oak/compare/v3.7.11...v3.7.12) (2024-09-24)
+
+
+### Bug Fixes
+
+* **theme:** forgot dark mode once again ([df0686c](https://github.com/p3ol/oak/commit/df0686c2b162453c7413bba7bb22e84cefc50889))
+
+
+
+
+
+## [3.7.11](https://github.com/p3ol/oak/compare/v3.7.10...v3.7.11) (2024-09-24)
+
+
+### Bug Fixes
+
+* correctly handle custom fields from component overrides ([1fec064](https://github.com/p3ol/oak/commit/1fec06425102b735d39d2815b04400837f30cd49))
+* missing tags field helper ([254eeb1](https://github.com/p3ol/oak/commit/254eeb1f7de4895211098224c5bc00ee65875df7))
+* prevent incorrect displayable settings ([a0b842f](https://github.com/p3ol/oak/commit/a0b842f6e8316052c588ae84b796356a900db6fe))
+* **theme:** broken tags field ([72f64b7](https://github.com/p3ol/oak/commit/72f64b7644753ad4a300319772473f2198042267))
+* upgrade various deps ([67f46fd](https://github.com/p3ol/oak/commit/67f46fd85170e238738ebcf7cbb8b213612ca44f))
+
+
+
+
+
 ## [3.7.10](https://github.com/p3ol/oak/compare/v3.7.9...v3.7.10) (2024-09-17)
 
 

lerna.json

@@ -3,7 +3,7 @@
     "packages/*"
   ],
   "npmClient": "yarn",
-  "version": "3.7.10",
+  "version": "3.7.12",
   "command": {
     "publish": {
       "conventionalCommits": true

package.json

@@ -56,33 +56,33 @@
     "@poool/eslint-plugin": "3.0.0",
     "@remirror/pm": "2.0.9",
     "@remirror/react": "2.0.35",
-    "@rollup/plugin-alias": "5.1.0",
-    "@rollup/plugin-commonjs": "26.0.1",
-    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-alias": "5.1.1",
+    "@rollup/plugin-commonjs": "26.0.3",
+    "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/plugin-swc": "0.4.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@storybook/addon-actions": "8.3.1",
-    "@storybook/addon-storysource": "8.3.1",
+    "@storybook/addon-actions": "8.3.3",
+    "@storybook/addon-storysource": "8.3.3",
     "@storybook/addon-styling-webpack": "1.0.0",
-    "@storybook/addon-themes": "8.3.1",
+    "@storybook/addon-themes": "8.3.3",
     "@storybook/addon-webpack5-compiler-swc": "1.0.5",
-    "@storybook/react": "8.3.1",
-    "@storybook/react-webpack5": "8.3.1",
-    "@storybook/theming": "8.3.1",
-    "@swc/core": "1.7.26",
+    "@storybook/react": "8.3.3",
+    "@storybook/react-webpack5": "8.3.3",
+    "@storybook/theming": "8.3.3",
+    "@swc/core": "1.7.28",
     "@swc/jest": "0.2.36",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.1",
     "@types/jest": "29.5.13",
-    "@types/node": "22.5.5",
-    "@types/react": "^18.3.7",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/parser": "8.6.0",
+    "@types/node": "22.6.1",
+    "@types/react": "18.3.9",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/parser": "8.7.0",
     "autoprefixer": "10.4.20",
     "ckeditor5": "43.1.0",
     "css-loader": "7.1.2",
-    "eslint": "8.57.0",
+    "eslint": "8.57.1",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-import": "2.30.0",
     "eslint-plugin-n": "17.10.3",
@@ -99,19 +99,19 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "remirror": "2.0.40",
-    "rollup": "4.22.0",
+    "rollup": "4.22.4",
     "rollup-plugin-postcss": "4.0.2",
-    "sass": "1.79.1",
-    "sass-loader": "16.0.1",
-    "storybook": "8.3.1",
+    "sass": "1.79.3",
+    "sass-loader": "16.0.2",
+    "storybook": "8.3.3",
     "storybook-dark-mode": "4.0.2",
     "style-loader": "4.0.0",
     "swc-loader": "0.2.6",
-    "tailwindcss": "3.4.12",
+    "tailwindcss": "3.4.13",
     "terser-webpack-plugin": "5.3.10",
     "typescript": "5.6.2",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4"
   },
-  "packageManager": "yarn@4.4.1"
+  "packageManager": "yarn@4.5.0"
 }

packages/addon-ckeditor5-react/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.11](https://github.com/p3ol/oak/compare/v3.7.10...v3.7.11) (2024-09-24)
+
+**Note:** Version bump only for package @oakjs/addon-ckeditor5-react
+
+
+
+
+
 ## [3.7.10](https://github.com/p3ol/oak/compare/v3.7.9...v3.7.10) (2024-09-17)
 
 **Note:** Version bump only for package @oakjs/addon-ckeditor5-react

packages/addon-ckeditor5-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oakjs/addon-ckeditor5-react",
-  "version": "3.7.10",
+  "version": "3.7.11",
   "description": "🌳 Modern, lightweight & modulable page builder",
   "main": "dist/oak-addon-ckeditor.cjs.js",
   "module": "dist/esm/index.js",
@@ -23,7 +23,7 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "@oakjs/ckeditor5-build-custom": "^3.7.10"
+    "@oakjs/ckeditor5-build-custom": "^3.7.11"
   },
   "devDependencies": {
     "@oakjs/ckeditor5-build-custom": "workspace:*",

packages/addon-remirror/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.11](https://github.com/p3ol/oak/compare/v3.7.10...v3.7.11) (2024-09-24)
+
+**Note:** Version bump only for package @oakjs/addon-remirror
+
+
+
+
+
 ## [3.7.10](https://github.com/p3ol/oak/compare/v3.7.9...v3.7.10) (2024-09-17)
 
 **Note:** Version bump only for package @oakjs/addon-remirror

packages/addon-remirror/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oakjs/addon-remirror",
-  "version": "3.7.10",
+  "version": "3.7.11",
   "description": "🌳 Modern, lightweight & modulable page builder",
   "main": "dist/oak-addon-remirror.cjs.js",
   "module": "dist/esm/index.js",

packages/ckeditor5-build-custom/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.11](https://github.com/p3ol/oak/compare/v3.7.10...v3.7.11) (2024-09-24)
+
+**Note:** Version bump only for package @oakjs/ckeditor5-build-custom
+
+
+
+
+
 ## [3.7.10](https://github.com/p3ol/oak/compare/v3.7.9...v3.7.10) (2024-09-17)
 
 **Note:** Version bump only for package @oakjs/ckeditor5-build-custom

packages/ckeditor5-build-custom/package.json

@@ -2,7 +2,7 @@
   "name": "@oakjs/ckeditor5-build-custom",
   "author": "CKSource",
   "description": "A custom CKEditor 5 build made by the CKEditor 5 online builder.",
-  "version": "3.7.10",
+  "version": "3.7.11",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "dist/ckeditor.js",
   "types": "dist/types/index.d.ts",

packages/core/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.11](https://github.com/p3ol/oak/compare/v3.7.10...v3.7.11) (2024-09-24)
+
+
+### Bug Fixes
+
+* correctly handle custom fields from component overrides ([1fec064](https://github.com/p3ol/oak/commit/1fec06425102b735d39d2815b04400837f30cd49))
+* missing tags field helper ([254eeb1](https://github.com/p3ol/oak/commit/254eeb1f7de4895211098224c5bc00ee65875df7))
+* prevent incorrect displayable settings ([a0b842f](https://github.com/p3ol/oak/commit/a0b842f6e8316052c588ae84b796356a900db6fe))
+
+
+
+
+
 ## [3.7.8](https://github.com/p3ol/oak/compare/v3.7.7...v3.7.8) (2024-09-09)
 
 

packages/core/lib/Builder/index.ts

@@ -164,14 +164,18 @@ export default class Builder extends Emitter {
 
   getComponentDisplayableSettings (
     element: ElementObject,
-    { component }: { component: ComponentObject}
+    { component, override }: {
+      component: ComponentObject;
+      override?: ComponentOverrideObject | ComponentOverride;
+    },
   ): Array<ComponentSettingsTabObject | ComponentSettingsFieldObject> {
     const component_ = new Component(component);
+    const override_ = new ComponentOverride(override ?? {});
 
     return [
       ...this.#components
         .getDisplayableSettings?.(
-          element, { component: component_ }
+          element, { component: component_, override: override_ }
         ) || [],
       ...this.#settings.getDisplayable?.(element) || [],
     ];

packages/core/lib/Components/index.ts

@@ -1,11 +1,13 @@
 import type {
   ComponentObject,
+  ComponentSettingsFieldObject,
   ComponentsGroupObject,
   ElementObject,
   GetTextCallback,
 } from '../types';
 import {
   Component,
+  ComponentOverride,
   ComponentSettingsField,
   ComponentSettingsTab,
   ComponentsGroup,
@@ -206,9 +208,10 @@ export default class Components extends Emitter implements IComponents {
 
   getDisplayableSettings (
     element: ElementObject,
-    { fields, component }: {
+    { fields, component, override }: {
       fields?: Array<ComponentSettingsField | ComponentSettingsTab>;
       component?: Component;
+      override?: ComponentOverride;
     } = {}
   ) {
     const displayable: Array<ComponentSettingsField> = [];
@@ -223,6 +226,14 @@ export default class Components extends Emitter implements IComponents {
       fields = component?.settings.fields;
     }
 
+    // Append fields that are only defined inside the component override
+    fields = fields.concat(override?.fields?.filter(f => (
+      !component?.settings?.fields.find(s =>
+        s.type !== 'tab' &&
+        (s as ComponentSettingsField).key === f.key
+      )
+    )) || []);
+
     for (const setting of fields) {
       if (Array.isArray(setting.fields)) {
         displayable.push(...this.getDisplayableSettings(element, {

packages/core/lib/addons.ts

@@ -31,6 +31,12 @@ export const selectField = (props?: FieldObject): FieldObject => ({
   ...props,
 });
 
+export const tagsField = (props?: FieldObject): FieldObject => ({
+  type: 'tags',
+  render: () => null,
+  ...props,
+});
+
 export const colorField = (props?: FieldObject): FieldObject => ({
   type: 'color',
   render: () => null,

packages/core/lib/classes.ts

@@ -52,8 +52,8 @@ export class Component {
   usable: boolean;
   editable: boolean;
   disallow: any;
-  options: any;
-  settings: any;
+  options?: ComponentOption[];
+  settings?: ComponentSettingsForm;
   deserialize: (opts: { builder: Builder }) => ElementObject;
   serialize: Function; //TODO
 
@@ -100,7 +100,7 @@ export class Component {
       droppable: this.droppable,
       usable: this.usable,
       editable: this.editable,
-      options: this.options,
+      options: this.options?.map(o => o.toObject?.() ?? o),
       disallow: this.disallow,
       render: this.render,
       sanitize: this.sanitize,
@@ -178,7 +178,7 @@ export class Override {
 export class ComponentOverride extends Override {
   id: string;
   targets: string[];
-  fields: ComponentSettingsFieldObject[];
+  fields: ComponentSettingsField[];
   render: ComponentOverrideObject['render'];
   construct: (
     opts: { builder: Builder, baseElement?: ElementObject }
@@ -192,13 +192,13 @@ export class ComponentOverride extends Override {
   editable: boolean;
   disallow: string[];
 
-  constructor (props: ComponentOverrideObject) {
+  constructor (props: ComponentOverrideObject | ComponentOverride) {
     super();
 
     this.type = 'component';
     this.id = props.id;
     this.targets = props.targets || [];
-    this.fields = props.fields || [];
+    this.fields = (props.fields || []).map(f => new ComponentSettingsField(f));
     this.render = props.render;
     this.sanitize = props.sanitize;
     this.construct = props.construct;
@@ -214,7 +214,7 @@ export class ComponentOverride extends Override {
       type: 'component',
       id: this.id,
       targets: this.targets,
-      fields: this.fields,
+      fields: this.fields?.map(f => f.toObject?.() ?? f),
       render: this.render,
       sanitize: this.sanitize,
       construct: this.construct,
@@ -330,12 +330,19 @@ export class SettingOverride extends Override {
 
 export class ComponentOption {
   icon: any;
-  render: Function;
+  render: any;
 
   constructor (props: ComponentOptionObject) {
     this.icon = props.icon;
     this.render = props.render;
   }
+
+  toObject (): ComponentOptionObject {
+    return {
+      icon: this.icon,
+      render: this.render,
+    };
+  }
 }
 
 export class ComponentSettingsForm {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oakjs/core",
-  "version": "3.7.8",
+  "version": "3.7.11",
   "description": "🌳 Modern, lightweight & modulable page builder",
   "main": "dist/oak-core.cjs.js",
   "module": "dist/esm/index.js",