weml-monaco 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -8,6 +8,27 @@ 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
+- `createWemlEditor`: an editor opened after the last one on the same Monaco closed has the language
+  again — highlighting, completion, hover, diagnostics, formatting. The `weml` id outlives the
+  disposed registration (Monaco cannot unregister a language) and was taken for someone else's.
+- The paragraph mode keeps the host's `readOnly` (`editorOptions`, the Settings view) and its
+  `readOnlyMessage`: the wrapper guard only adds its own lock, while the selection touches the wrapper.
+
 ## [0.9.0] — 2026-10-13
 
 ### Added

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);
@@ -38220,10 +38236,13 @@ function injectEditorStyles(doc = document) {
 // src/editor/wrapperGuard.ts
 var HIDDEN_AREAS_SOURCE = "weml-editor.wrapper";
 var WRAPPER_LINE_CLASS = "weml-editor-wrapper-line";
-function guardWrapper(m2, editor, hideWrapper) {
+var WRAPPER_MESSAGE = { value: "The `<div id>` wrapper is not part of the paragraph and cannot be edited." };
+function guardWrapper(m2, editor, hideWrapper, hostOptions) {
   const model = editor.getModel();
   if (!model) return { dispose() {
+  }, setHostOptions() {
   } };
+  let host = hostOptions;
   const disposables = [];
   const touchesWrapper = (selection) => selection.startLineNumber < 2 || selection.endLineNumber > model.getLineCount() - 1;
   const clampSelections = () => {
@@ -38240,15 +38259,17 @@ function guardWrapper(m2, editor, hideWrapper) {
       })
     );
   };
+  let applied;
   const syncReadOnly = () => {
-    const readOnly = (editor.getSelections() ?? []).some(touchesWrapper);
-    if (editor.getOption(m2.editor.EditorOption.readOnly) !== readOnly) editor.updateOptions({ readOnly });
+    const locked = (editor.getSelections() ?? []).some(touchesWrapper);
+    const readOnly = host.readOnly === true || locked;
+    const readOnlyMessage = locked && host.readOnly !== true ? WRAPPER_MESSAGE : host.readOnlyMessage;
+    if (applied?.readOnly === readOnly && applied.readOnlyMessage === readOnlyMessage) return;
+    applied = { readOnly, readOnlyMessage };
+    editor.updateOptions({ readOnly, readOnlyMessage });
   };
   const offset = contentLineOffset("paragraph", hideWrapper);
-  editor.updateOptions({
-    readOnlyMessage: { value: "The `<div id>` wrapper is not part of the paragraph and cannot be edited." },
-    lineNumbers: (lineNumber) => String(lineNumber - offset)
-  });
+  editor.updateOptions({ lineNumbers: (lineNumber) => String(lineNumber - offset) });
   disposables.push(
     editor.onDidChangeCursorSelection(() => {
       if (hideWrapper) clampSelections();
@@ -38313,6 +38334,11 @@ function guardWrapper(m2, editor, hideWrapper) {
     })
   );
   return {
+    setHostOptions(options) {
+      host = options;
+      applied = void 0;
+      syncReadOnly();
+    },
     dispose() {
       for (const disposable of disposables) disposable.dispose();
       wrapperLines.clear();
@@ -38352,6 +38378,7 @@ function jsonOptions(options) {
   return Object.fromEntries(Object.entries(options).filter(([key, value]) => !NOT_SETTINGS.has(key) && value !== void 0 && plain(value)));
 }
 var sharedLanguage = /* @__PURE__ */ new WeakMap();
+var ownLanguageId = /* @__PURE__ */ new WeakSet();
 var editorCount = 0;
 function acquireLanguage(m2, options) {
   if (options.language) return { registration: options.language, release() {
@@ -38361,12 +38388,13 @@ function acquireLanguage(m2, options) {
     shared.users++;
     return { registration: shared.registration, release: () => releaseShared(m2) };
   }
-  if (m2.languages.getLanguages().some((language) => language.id === "weml")) {
+  if (!ownLanguageId.has(m2) && m2.languages.getLanguages().some((language) => language.id === "weml")) {
     return { registration: { analysis: localAnalysis, formatter: localFormatter, dispose() {
     } }, release() {
     } };
   }
   const registration = options.workers ? registerWemlWorker(m2, { ...options.languageOptions, worker: options.workers.analysis, formatWorker: options.workers.format }) : registerWeml(m2, options.languageOptions);
+  ownLanguageId.add(m2);
   sharedLanguage.set(m2, { registration, users: 1 });
   return { registration, release: () => releaseShared(m2) };
 }
@@ -38458,7 +38486,12 @@ function createWemlEditor(m2, container, options = {}) {
   const editorHost = element("div", { className: "wb-editor wb-part" });
   const baseOptions = { ...EDITOR_OPTIONS, ...options.editorOptions };
   const editor = m2.editor.create(editorHost, { ...baseOptions, ...layout.editorOptions, model });
-  if (mode === "paragraph") disposables.push(guardWrapper(m2, editor, options.hideWrapper ?? false));
+  const wrapperGuard = mode === "paragraph" ? guardWrapper(m2, editor, options.hideWrapper ?? false, { ...baseOptions, ...layout.editorOptions }) : void 0;
+  if (wrapperGuard) disposables.push(wrapperGuard);
+  const applyEditorOptions = (next) => {
+    editor.updateOptions(next);
+    wrapperGuard?.setHostOptions(next);
+  };
   const content = createContentApi(editor, mode, lineOffset, initialValue);
   const valueListeners = /* @__PURE__ */ new Set();
   const problemListeners = /* @__PURE__ */ new Set();
@@ -38732,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") {
@@ -38763,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
@@ -38814,12 +38849,12 @@ function createWemlEditor(m2, container, options = {}) {
     const own = Object.fromEntries(Object.entries(jsonOptions(parsed)).filter(([key, value]) => JSON.stringify(value) !== JSON.stringify(base[key])));
     if (JSON.stringify(own) === JSON.stringify(layout.editorOptions ?? {})) return;
     layout.editorOptions = own;
-    editor.updateOptions({ ...base, ...own });
+    applyEditorOptions({ ...base, ...own });
     saveLayout();
   }
   function resetSettings() {
     layout.editorOptions = {};
-    editor.updateOptions(jsonOptions(baseOptions));
+    applyEditorOptions(jsonOptions(baseOptions));
     saveLayout();
     views.get("settings")?.settings?.setText(settingsText());
   }
@@ -39419,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);