From 7ffa2f758883e524a18ae55837e12d15eae30e7e Mon Sep 17 00:00:00 2001 From: Rokojori Date: Sat, 11 Jul 2026 13:16:16 +0200 Subject: [PATCH] =?UTF-8?q?history:=20CodePanel=20=E2=80=94=20CodeMirror?= =?UTF-8?q?=20editor,=20FileEditorRegistry,=20file=20routing=20by=20suffix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- workspace/_assets_/nav-data.js | 2 + .../history/2026/07-July/10-Friday/index.html | 187 ++++++++++++++++++ workspace/history/index.html | 5 + 3 files changed, 194 insertions(+) create mode 100644 workspace/history/2026/07-July/10-Friday/index.html diff --git a/workspace/_assets_/nav-data.js b/workspace/_assets_/nav-data.js index cd0bc97..96f53d3 100644 --- a/workspace/_assets_/nav-data.js +++ b/workspace/_assets_/nav-data.js @@ -11,6 +11,7 @@ var NAV_DATA = { path: 'guides/index.html', children: [ { title: 'Writing TypeScript Code', path: 'guides/writing-typescript-code/index.html' }, + { title: 'Writing Editor Panels', path: 'guides/writing-editor-panels/index.html' }, { title: 'Locales', path: 'guides/locales/index.html' }, ] }, @@ -26,6 +27,7 @@ var NAV_DATA = { title: 'History', path: 'history/index.html', children: [ + { title: 'Friday, 10 July 2026', path: 'history/2026/07-July/10-Friday/index.html' }, { title: 'Thursday, 9 July 2026', path: 'history/2026/07-July/09-Thursday/index.html' }, { title: 'Monday, 6 July 2026', path: 'history/2026/07-July/06-Monday/index.html' }, { title: 'Sunday, 5 July 2026', path: 'history/2026/07-July/05-Sunday/index.html' }, diff --git a/workspace/history/2026/07-July/10-Friday/index.html b/workspace/history/2026/07-July/10-Friday/index.html new file mode 100644 index 0000000..b31190b --- /dev/null +++ b/workspace/history/2026/07-July/10-Friday/index.html @@ -0,0 +1,187 @@ + + + + + + Session Summary — 10 July 2026 + + + + +
+ +
+

Friday, 10 July 2026

+

Roject — Session Summary

+

+ CodePanel — a CodeMirror-based code editor panel with a central + file-editor registry that routes files to the right panel by suffix. +

+
+ +
+

What we built

+ +
+

FileEditorRegistry

+

+ A new src/editor/FileEditorRegistry.ts class that maps file + suffixes to editor panel tags. It holds a default in-memory list and + optionally loads a project-level override from + workspace/editor/file-editors.json inside the open project. +

+

+ Matching is pure suffix comparison — filename.endsWith('.' + suffix) + — so special.html beats html when it appears + earlier in the list. The project list is checked first entry-by-entry; + only when no match is found there does it fall through to the defaults. + Unknown extensions fire an onFileTypeUnknown event instead + of opening anything. +

+
+ src/editor/FileEditorRegistry.ts + suffix matching + project override +
+
+ +
+

Editor routing changes

+

+ Editor.openDocument now loads the registry (once, lazily) + before fetching file content. It resolves an editorTag and + includes it in the DocumentOpenedEvent. If no tag is found + it dispatches the new onFileTypeUnknown event and returns + early without fetching the file. +

+

+ HtmlEditorPanel was updated to ignore events where + editorTag !== 'html-editor-panel'. + TabContainer's dirty and saved listeners were simplified + to match any panel by currentPath rather than hard-coding + panelType === 'html-editor'. +

+
+ src/editor/Editor.ts + editorTag in DocumentOpenedEvent + onFileTypeUnknown +
+
+ +
+

CodePanel component

+

+ A new code-panel custom element backed by CodeMirror 5. + Toolbar matches html-editor-panel: Pin, Undo, Redo, Save. + Undo and Redo delegate directly to cm.undo() / + cm.redo(); button enable-states are refreshed from + cm.historySize() on every CM change event. +

+

+ Language mode is resolved from the file extension + (js/ts/json → javascript, + css → css, xml/svg → xml, + md → markdown, others → plain text). + A custom cp-dark CodeMirror theme matches the editor's + colour palette (background #0f1117, Material-style token + colours). +

+

+ The file tree was updated so all files are clickable (not just HTML); + clicking an unsupported extension shows a 3-second red banner + ("Can't open extension .xyz") at the top of the tree. +

+
+ src/components/code-panel/code-panel.ts + public/components/code-panel/code-panel.css + CodeMirror 5 + cp-dark theme +
+
+ +
+ +
+

Key Decisions

+ +
+ Central JSON list, not editor self-registration +

+ Editors could declare their own patterns at import time, but that makes + overriding them require touching editor source. A central list stored as + data (JSON) lets a project prepend custom mappings without modifying any + editor code. The project file is optional; when absent, in-memory + defaults apply. +

+
+ +
+ Per-entry layered lookup, not full list replacement +

+ When a project provides file-editors.json, only the suffixes + it declares are overridden. Everything else falls through to the defaults. + This means a project only needs to list custom formats, not restate all + standard ones. +

+
+ +
+ Plain suffix strings, no glob patterns +

+ Glob matching requires a library or a non-trivial implementation. + Stripping the leading *. and using + endsWith('.' + suffix) is sufficient for all real cases + (including compound extensions like special.html) and + needs no dependency. +

+
+ +
+ CodeMirror 5 as a UMD global, vendored locally +

+ CodeMirror 6 requires a bundler or complex import maps to use without + a build step. CM5 ships a single-file UMD build that works as a plain + <script> tag, matching the existing pattern + (markdown-it). The core and five language modes were + downloaded from cdnjs and placed in public/vendor/, + keeping the setup self-hosted and version-locked. +

+
+ +
+ +
+

Structural Changes

+
+

+ src/editor/FileEditorRegistry.ts — new: suffix-to-editor registry with project override
+ src/editor/Editor.ts — added fileEditorRegistry, editorTag in event, onFileTypeUnknown
+ src/components/html-editor-panel/html-editor-panel.ts — filters onDocumentOpened by editorTag
+ src/components/file-tree-panel/file-tree-panel.ts — all files clickable, _showTypeError for unknown extensions
+ public/components/file-tree-panel/file-tree-panel.css — all files get hover/active styles, added .ftp-type-error
+ src/components/code-panel/code-panel.ts — new: CodeMirror 5 editor panel
+ public/components/code-panel/code-panel.css — new: panel layout + cp-dark CM theme
+ public/vendor/codemirror.min.js — new (CM5 core)
+ public/vendor/codemirror.min.css — new (CM5 base CSS)
+ public/vendor/cm-mode-xml.min.js — new
+ public/vendor/cm-mode-javascript.min.js — new
+ public/vendor/cm-mode-css.min.js — new
+ public/vendor/cm-mode-htmlmixed.min.js — new
+ public/vendor/cm-mode-markdown.min.js — new
+ public/editor.html — added CM vendor scripts, code-panel CSS and module script
+ src/components/tab-container/tab-container.ts — added Code Editor to menu, panel-agnostic dirty tracking
+ src/components/editor-shell/editor-shell.ts — awaits code-panel definition +

+
+
+ +
+ Roject — session log — 10 July 2026 +
+ +
+ + + + + diff --git a/workspace/history/index.html b/workspace/history/index.html index 5050a34..f81b131 100644 --- a/workspace/history/index.html +++ b/workspace/history/index.html @@ -19,6 +19,11 @@

2026 — July

+
+

Friday, 10 July 2026

+

CodePanel — CodeMirror 5 code editor panel; FileEditorRegistry routes files to editors by suffix with a project-level JSON override; all file types now clickable in the tree.

+
+

Thursday, 9 July 2026

RojoChatPanel — streaming AI chat panel for the editor with LangChain backend (@langchain/core + @langchain/openai), markdown-it rendering, and tab container integration.