diff --git a/modules/ROOT/pages/8.7.0-release-notes.adoc b/modules/ROOT/pages/8.7.0-release-notes.adoc index 1e946e2b97..95a2fbcbdc 100644 --- a/modules/ROOT/pages/8.7.0-release-notes.adoc +++ b/modules/ROOT/pages/8.7.0-release-notes.adoc @@ -395,7 +395,7 @@ tinymce.dom.AriaAnnouncer.announce('Error occurred', { assertive: true }); [[changes]] == Changes -{productname} {release-version} also includes the following change: +{productname} {release-version} also includes the following changes: === Changed LESS math mode from always to parens-division. // #TINYMCE-13317 @@ -404,6 +404,13 @@ Previously, the Oxide Less compiler ran with `math: 'always'`, which treated eve In {productname} {release-version}, the Oxide Less compiler uses `parens-division` math mode. The compiler evaluates division only when the operation is wrapped in parentheses and preserves `/` in CSS color syntax. {productname} updated existing division expressions in Oxide Less files to wrap division in parentheses. Custom skin authors who compile Oxide Less must wrap division operations in parentheses. +=== Building {productname} from source now uses Bun instead of Yarn +// #TINYMCE-12819 + +Previously, building {productname} from source required Yarn, and the repository provided a `+yarn.lock+` file to lock dependency versions. Contributors and custom skin authors ran commands such as `+yarn+`, `+yarn build+`, and `+yarn oxide-start+`. + +In {productname} {release-version}, the repository uses link:https://bun.sh/[Bun^] for package management and build scripts and provides a `+bun.lock+` file in place of `+yarn.lock+`. The equivalent commands are `+bun install+`, `+bun run build+`, and `+bun oxide-start+`. Yarn no longer resolves the repository dependencies. This change does not affect integrators who install {productname} from npm or load it from a content delivery network (CDN). For the updated skin build steps, see xref:creating-a-skin.adoc[Create a skin]. + [[bug-fixes]] == Bug fixes @@ -492,4 +499,18 @@ In {productname} {release-version}, a targeted workaround detects this case and Previously, pressing the undo keyboard shortcut (Ctrl+Z, or Cmd+Z on macOS) after deleting a selection could leave the cursor in the wrong position. An earlier change registered an extra undo step whenever Ctrl or Cmd was pressed, so the step was recorded before the deleted content was restored. -In {productname} {release-version}, {productname} registers that undo step only when Ctrl or Cmd is pressed together with Backspace or Delete, rather than on every Ctrl or Cmd key press. Undoing the deletion of a selection now restores both the content and the original selection correctly. \ No newline at end of file +In {productname} {release-version}, {productname} registers that undo step only when Ctrl or Cmd is pressed together with Backspace or Delete, rather than on every Ctrl or Cmd key press. Undoing the deletion of a selection now restores both the content and the original selection correctly. + +=== Starting the Oxide skin demo without a local build failed with an unclear error +// #TINYMCE-14348 + +Previously, starting the Oxide skin demo before building {productname} from the repository root failed with the error `+chalk.red is not a function+`. The demo build task attempted to report the missing local build and then substitute a cloud-hosted copy of {productname}. The reporting step raised the error instead. Custom skin authors could not run the demo to test skin changes, and the error message did not identify the missing local build as the cause. + +In {productname} {release-version}, the demo build task stops with a message that names the required step: + +[source,text] +---- +Local TinyMCE build not found. Run `bun run build` in the repository root to build TinyMCE before starting the skin demo. +---- + +The demo build task no longer substitutes a cloud-hosted copy of {productname}, so the demo always runs against the local build. Custom skin authors can now resolve the failure by building {productname} before starting the demo. \ No newline at end of file diff --git a/modules/ROOT/pages/creating-a-skin.adoc b/modules/ROOT/pages/creating-a-skin.adoc index 1b068f1a77..84c3933a28 100644 --- a/modules/ROOT/pages/creating-a-skin.adoc +++ b/modules/ROOT/pages/creating-a-skin.adoc @@ -11,7 +11,7 @@ This guide explains how to manually create a new skin to customize the appearanc Before beginning, ensure that: * Familiarity with the command line and basic commands is established. -* link:https://nodejs.org/en/[Node.js^] and link:https://yarnpkg.com/[Yarn^] are already installed. +* link:https://nodejs.org/en/[Node.js^] and link:https://bun.sh/[Bun^] are already installed. * A basic understanding of link:http://lesscss.org[Less^], the CSS preprocessor used to build skins, is required. Specifically, review the link:http://lesscss.org/features/#variables-feature[section on variables^]. == Preparation @@ -29,22 +29,22 @@ Follow these steps to set up the skin development environment: + [source,sh] ---- -yarn && yarn dev && yarn build +bun install && bun run dev && bun run build ---- . Start the development server to preview skins: + [source,sh] ---- -yarn oxide-start +bun oxide-start ---- -. Once the server starts, open a browser and navigate to the displayed URL, typically `+http://localhost:3000+`. +. Once the server starts, open a browser and navigate to the displayed URL, typically `+http://localhost:4000+`. The development environment is now setup and should look similar to the following: image::SDK-for-silver.png[{productname} skin SDK for Silver theme] [NOTE] -If required to modify the skin without launching a web server, run **`+yarn oxide-build+`** instead of **`+yarn oxide-start+`**. +If required to modify the skin without launching a web server, run **`+bun oxide-build+`** instead of **`+bun oxide-start+`**. == Creating or Editing a Skin @@ -82,13 +82,13 @@ Skins **only** affect the visual appearance of the UI. Element positioning is ma + [source,sh] ---- -yarn build +bun run build ---- . Start the development server by running: + [source,sh] ---- -yarn oxide-start +bun oxide-start ---- + [TIP] @@ -135,13 +135,13 @@ To modify the appearance of content inside the editor (e.g., headings, lists, qu + [source,sh] ---- -yarn build +bun run build ---- . Start the development server: + [source,sh] ---- -yarn oxide-start +bun oxide-start ---- + [TIP]