From eb20a666c60b5f656251d4fc27c82d75ce45fe41 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 3 Aug 2026 12:06:45 +1000 Subject: [PATCH] TINYDOC-3526 - Add missing 8.7.0 release note entries and update the skin guide for Bun Add two release note entries that were missed for 8.7.0: * Bug fixes: starting the Oxide skin demo without a local build failed with "chalk.red is not a function" (TINYMCE-14348). The failure was present in 8.4.0 through 8.6.0 and is resolved in 8.7.0. * Changes: building TinyMCE from source now uses Bun instead of Yarn (TINYMCE-12819). The migration first shipped in 8.7.0 and is breaking for source builds, but does not affect npm or CDN consumers. Update creating-a-skin.adoc, which documents the source build workflow and had not been updated for the Bun migration: * Replace the eight yarn commands with their bun equivalents and update the prerequisite from Yarn to Bun. * Correct the skin demo preview URL from port 3000 to port 4000, which is the port the Oxide demo server uses. --- modules/ROOT/pages/8.7.0-release-notes.adoc | 25 +++++++++++++++++++-- modules/ROOT/pages/creating-a-skin.adoc | 18 +++++++-------- 2 files changed, 32 insertions(+), 11 deletions(-) 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]