weml-monaco 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ This package shares the language logic of the VS Code extension (`weml-support`)
 entries below track the port catching up with its provider changes; since the shared language
 features, both take the same code.
 
+## [0.10.0] — 2026-10-14
+
+### Added
+- The preview takes the host's direction and language: `createWemlPreview(editor, { language: { dir,
+  lang } })` and `preview.setLanguage(...)`, each field over the document's own `<html dir lang>`. A
+  fragment has none — a paragraph of a right-to-left publication rendered left to right.
+- The editor passes them on: `preview.language` (`createWemlEditor`), `setPreviewLanguage`; in
+  `<WemlEditor>` the prop is followed, as `preview.theme` is.
+
+VS Code has no counterpart: its preview shows a file, whose own `<html dir lang>` it already
+follows, and has no host to know a language the file does not declare.
+
 ## [0.9.1] — 2026-10-14
 
 ### Fixed

package/README.md

@@ -240,7 +240,9 @@ weml.dispose();
   `.monaco-component`); the workbench colours Monaco lacks (tabs, side bar, status
   bar) are derived from the editor's. The stylesheet is injected, and published as
   `weml-monaco/editor.css` (`injectStyles: false` to link it).
-- The preview renders with `weml-stylesheet`, so this entry needs it installed.
+- The preview renders with `weml-stylesheet`, so this entry needs it installed. The host's
+  direction and language go in `preview.language` (`{ dir, lang }`, over the document's own; a
+  paragraph has none), changed with `setPreviewLanguage`.
 
 ## React
 
@@ -253,7 +255,7 @@ import { WemlEditor, type WemlEditorApi } from 'weml-monaco/react';
 A thin component over `createWemlEditor` (React is an optional peer dependency,
 `>=18`): the options are its props, `editorRef` gives the editor's API
 (`WemlEditorApi`). Props marked `@mount` are read once — a change to one needs a
-new `key`; `fileName`, `saving`, `saveDisabled` and `preview.theme` follow their props.
+new `key`; `fileName`, `saving`, `saveDisabled`, `preview.theme` and `preview.language` follow their props.
 `sidePanels` take React content (`content: node | (editor) => node`), rendered into
 their views through portals — inside the application's context. React and react-dom
 are optional peer dependencies (`>=18`).
@@ -345,7 +347,10 @@ preview.dispose();
 It renders at once, then after a pause in typing (`delay`, 300 ms), and at once
 again when the editor gets another model; an unchanged text is not rendered
 twice (a whole book is not cheap). A whole document keeps its `dir` / `lang`
-(right-to-left books render right to left). Blank text shows `emptyText`;
+(right-to-left books render right to left). A fragment has none of its own — a
+paragraph of an Arabic publication — so the host gives them: `language: { dir:
+'rtl', lang: 'ar-AE' }`, each field over the document's, changed later with
+`preview.setLanguage(...)`. Blank text shows `emptyText`;
 `transform(text)` picks what to render (e.g. without a wrapper your editor adds).
 
 **Scroll sync**, both ways, as in the VS Code preview (and with the same code,

package/dist/editor.cjs

@@ -36778,12 +36778,23 @@ function createWemlPreview(editor, options = {}) {
     content.hidden = blank;
     empty.hidden = !blank;
   };
-  const setLanguage = (dir, lang) => {
+  let hostLanguage = options.language;
+  let documentDir;
+  let documentLang;
+  const applyLanguage = () => {
+    const dir = hostLanguage?.dir ?? documentDir;
+    const lang = hostLanguage?.lang ?? documentLang;
     if (dir) content.dir = dir;
     else content.removeAttribute("dir");
     if (lang) content.lang = lang;
     else content.removeAttribute("lang");
   };
+  const setDocumentLanguage = (dir, lang) => {
+    documentDir = dir;
+    documentLang = lang;
+    applyLanguage();
+  };
+  applyLanguage();
   const rendered = () => {
     anchors = void 0;
     if (sync.previewWithEditor) followEditor();
@@ -36811,7 +36822,7 @@ function createWemlPreview(editor, options = {}) {
         generation = update2.generation;
         shownVersion = { model, version };
         showBlank(update2.blank);
-        setLanguage(update2.blank ? void 0 : update2.dir, update2.blank ? void 0 : update2.lang);
+        setDocumentLanguage(update2.blank ? void 0 : update2.dir, update2.blank ? void 0 : update2.lang);
         rendered();
       }
       done();
@@ -36831,7 +36842,7 @@ function createWemlPreview(editor, options = {}) {
     const blank = markup.trim() === "";
     showBlank(blank);
     const language = blank ? {} : (0, import_weml_stylesheet.documentLanguage)(markup);
-    setLanguage(language.dir, language.lang);
+    setDocumentLanguage(language.dir, language.lang);
     const { body, bodyLine } = splitDocument(markup);
     const next = blank ? [] : splitPreviewChunks(body, firstLine + bodyLine);
     chunks.apply(diffPreviewChunks(texts, next));
@@ -36933,6 +36944,11 @@ function createWemlPreview(editor, options = {}) {
   return {
     element: element2,
     setTheme,
+    setLanguage(language) {
+      hostLanguage = language;
+      applyLanguage();
+      anchors = void 0;
+    },
     refresh: now,
     setScrollSync(next) {
       sync = scrollSyncOf(next);
@@ -38749,6 +38765,7 @@ function createWemlEditor(m2, container, options = {}) {
   const views = /* @__PURE__ */ new Map();
   let previewScrollSync = options.preview?.scrollSync !== false;
   let previewTheme = options.preview?.theme;
+  let previewLanguage = options.preview?.language;
   const createView = (view) => {
     const host = element("div");
     if (view === "problems") {
@@ -38780,6 +38797,7 @@ function createWemlEditor(m2, container, options = {}) {
       // Cut and compared in the WEML worker when the language runs there (a file: no transform).
       analysis,
       theme: previewTheme,
+      language: previewLanguage,
       scrollSync: previewScrollSync,
       container: host,
       // A paragraph without its wrapper, from the model's second line (the scroll sync matches
@@ -39436,6 +39454,10 @@ function createWemlEditor(m2, container, options = {}) {
       previewTheme = theme;
       views.get("preview")?.preview?.setTheme(theme);
     },
+    setPreviewLanguage(language2) {
+      previewLanguage = language2;
+      views.get("preview")?.preview?.setLanguage(language2);
+    },
     addStatusBarItem(item, alignment = "left") {
       item.classList.add("wb-status-item");
       (alignment === "left" ? statusLeft : statusRight).append(item);