mdsquare 0.1.0 → 0.2.0

package/README.md

@@ -32,6 +32,17 @@ editor.getValue(); // 지금 문서 (마크다운)
 editor.setValue("# 새 문서");
 ```
 
+### 파일 열기
+
+파일을 읽고 저장하는 것은 앱이 맡고, 에디터에는 글자만 넘깁니다. 다른 파일로 바꿀 때는 `open`을 씁니다.
+(`setValue`로 바꾸면 Ctrl+Z로 이전 파일 내용이 돌아오고, `onChange`가 불려 방금 연 파일을 바로 저장하게 됩니다)
+
+```ts
+async function openFile(file: File) {
+  editor.open(await file.text());
+}
+```
+
 에디터 높이는 CSS로 정합니다. (기본: 내용만큼 늘어남)
 
 ```css
@@ -65,7 +76,8 @@ editor.setValue("# 새 문서");
 | 메서드 | 설명 |
 |---|---|
 | `getValue()` | 지금 문서 |
-| `setValue(value)` | 문서 전체 바꾸기 (실행 취소 가능) |
+| `open(value)` | 다른 파일(문서) 열기. 실행 취소 기록을 새로 시작하고 `onChange`를 부르지 않음. 커서는 처음, 스크롤은 맨 위 |
+| `setValue(value)` | 지금 문서의 내용 바꾸기. 편집처럼 실행 취소할 수 있고 `onChange`도 부름 |
 | `focus()` | 에디터에 포커스 |
 | `setTheme(theme)` | 테마 바꾸기 |
 | `setReadOnly(readOnly)` | 읽기 전용 바꾸기 |
@@ -124,9 +136,9 @@ TikZ를 켜는 앱이 TikZJax 파일을 직접 제공하므로, 그 앱은 TikZJ
   5. [x] Highlight: `==`
 - [x] Inline Code
 - [x] Escape
-- [ ] Heading
+- [x] Heading
   1. [x] Normal Heading: `#`
-  2. [ ] SetextHeading: `===`, `---` (보류: 스타일만 적용, 밑줄 줄 숨김 미구현)
+  2. [x] SetextHeading(`===`, `---` 밑줄) 비활성: `===`는 글, 문단 바로 아래 `---`는 수평선. 켜려면 `markdown: { setextHeadings: true }` (확장으로 쓸 때는 `extendedMarkdown({ setextHeadings: true })`)
 - [x] HashTag
   1. [x] Hierarchical HashTag: `#parent/child`
 - [x] Mention

package/dist/editor.d.ts

@@ -92,12 +92,30 @@ export declare class MDSquareEditor {
     private theme;
     private media;
     private readonly onMediaChange;
+    /** 옵션으로 정해지는 확장들. 파일을 새로 열 때도 같은 것을 써서 렌더링 캐시(수식, TikZ 등)를 이어 씁니다. */
+    private readonly extensions;
+    private readOnly;
     constructor(options?: MDSquareEditorOptions);
+    /** 지금 설정(테마, 읽기 전용)으로 새 상태를 만듭니다. */
+    private createState;
     /** 에디터 바깥 요소 (`.cm-editor`) */
     get dom(): HTMLElement;
     /** 지금 문서 (마크다운) */
     getValue(): string;
-    /** 문서 전체를 바꿉니다. (실행 취소할 수 있고 onChange도 호출됨) 커서는 문서 처음으로 */
+    /**
+     * 다른 파일(문서)을 엽니다. 처음 연 것처럼 새로 시작합니다.
+     * - 실행 취소 기록을 새로 시작합니다. (Ctrl+Z로 이전 파일 내용으로 돌아가지 않음)
+     * - onChange를 부르지 않습니다. (방금 연 파일을 바로 저장하지 않음)
+     * - 커서는 문서 처음, 스크롤은 맨 위. 접기·열린 메뉴 등 화면 상태도 초기화합니다.
+     * - 테마, 읽기 전용 등 설정은 그대로입니다.
+     *
+     * 같은 문서 안에서 내용을 바꾸는 것(실행 취소할 수 있어야 하는 편집)은 setValue를 쓰세요.
+     */
+    open(value: string): void;
+    /**
+     * 지금 문서의 내용을 바꿉니다. 편집처럼 다뤄 실행 취소할 수 있고 onChange도 호출됩니다. 커서는 문서 처음으로.
+     * 다른 파일을 여는 것이라면 open을 쓰세요.
+     */
     setValue(value: string): void;
     focus(): void;
     /** 테마 바꾸기 ("auto": 시스템 설정을 따르고, 설정이 바뀌면 함께 바뀜) */

package/dist/editor.js

@@ -70,32 +70,40 @@ export class MDSquareEditor {
     theme;
     media = null;
     onMediaChange = () => this.applyTheme();
+    /** 옵션으로 정해지는 확장들. 파일을 새로 열 때도 같은 것을 써서 렌더링 캐시(수식, TikZ 등)를 이어 씁니다. */
+    extensions;
+    readOnly;
     constructor(options = {}) {
         this.theme = options.theme ?? "auto";
+        this.readOnly = options.readOnly ?? false;
         const onChange = options.onChange;
-        this.view = new EditorView({
-            state: EditorState.create({
-                doc: options.value ?? "",
-                extensions: [
-                    basicSetup({ lineNumbers: options.lineNumbers ?? false }),
-                    EditorView.lineWrapping,
-                    this.themeSlot.of(this.themeExtension()),
-                    this.readOnlySlot.of(readOnlyExtension(options.readOnly ?? false)),
-                    options.placeholder ? placeholderExtension(options.placeholder) : [],
-                    markdownExtensions(options),
-                    onChange
-                        ? EditorView.updateListener.of((update) => {
-                            if (update.docChanged)
-                                onChange(update.state.doc.toString(), this);
-                        })
-                        : [],
-                    options.extensions ?? [],
-                ],
-            }),
-            parent: options.parent,
-        });
+        this.extensions = [
+            basicSetup({ lineNumbers: options.lineNumbers ?? false }),
+            EditorView.lineWrapping,
+            options.placeholder ? placeholderExtension(options.placeholder) : [],
+            markdownExtensions(options),
+            onChange
+                ? EditorView.updateListener.of((update) => {
+                    if (update.docChanged)
+                        onChange(update.state.doc.toString(), this);
+                })
+                : [],
+            options.extensions ?? [],
+        ];
+        this.view = new EditorView({ state: this.createState(options.value ?? ""), parent: options.parent });
         this.watchSystemTheme();
     }
+    /** 지금 설정(테마, 읽기 전용)으로 새 상태를 만듭니다. */
+    createState(doc) {
+        return EditorState.create({
+            doc,
+            extensions: [
+                this.themeSlot.of(this.themeExtension()),
+                this.readOnlySlot.of(readOnlyExtension(this.readOnly)),
+                this.extensions,
+            ],
+        });
+    }
     /** 에디터 바깥 요소 (`.cm-editor`) */
     get dom() {
         return this.view.dom;
@@ -104,7 +112,24 @@ export class MDSquareEditor {
     getValue() {
         return this.view.state.doc.toString();
     }
-    /** 문서 전체를 바꿉니다. (실행 취소할 수 있고 onChange도 호출됨) 커서는 문서 처음으로 */
+    /**
+     * 다른 파일(문서)을 엽니다. 처음 연 것처럼 새로 시작합니다.
+     * - 실행 취소 기록을 새로 시작합니다. (Ctrl+Z로 이전 파일 내용으로 돌아가지 않음)
+     * - onChange를 부르지 않습니다. (방금 연 파일을 바로 저장하지 않음)
+     * - 커서는 문서 처음, 스크롤은 맨 위. 접기·열린 메뉴 등 화면 상태도 초기화합니다.
+     * - 테마, 읽기 전용 등 설정은 그대로입니다.
+     *
+     * 같은 문서 안에서 내용을 바꾸는 것(실행 취소할 수 있어야 하는 편집)은 setValue를 쓰세요.
+     */
+    open(value) {
+        this.view.setState(this.createState(value));
+        this.view.scrollDOM.scrollTop = 0;
+        this.view.scrollDOM.scrollLeft = 0;
+    }
+    /**
+     * 지금 문서의 내용을 바꿉니다. 편집처럼 다뤄 실행 취소할 수 있고 onChange도 호출됩니다. 커서는 문서 처음으로.
+     * 다른 파일을 여는 것이라면 open을 쓰세요.
+     */
     setValue(value) {
         this.view.dispatch({
             changes: { from: 0, to: this.view.state.doc.length, insert: value },
@@ -121,6 +146,7 @@ export class MDSquareEditor {
         this.applyTheme();
     }
     setReadOnly(readOnly) {
+        this.readOnly = readOnly;
         this.view.dispatch({ effects: this.readOnlySlot.reconfigure(readOnlyExtension(readOnly)) });
     }
     /** 에디터를 없애고 이벤트를 정리합니다. */

package/dist/extensions.d.ts

@@ -1,6 +1,6 @@
 import { markdown } from "@codemirror/lang-markdown";
 import { type Extension } from "@codemirror/state";
-import type { MarkdownExtension } from "@lezer/markdown";
+import type { MarkdownConfig, MarkdownExtension } from "@lezer/markdown";
 import { Highlight, markTag } from "./highlight.js";
 import { Underline, underlineTag } from "./underline.js";
 import { Hashtag, hashtagTag } from "./hashtagSyntax.js";
@@ -58,7 +58,15 @@ export interface ExtendedMarkdownOptions {
      * 바로 위 항목의 이어지는 줄이 됩니다.
      */
     blankLineAfterList?: boolean;
+    /**
+     * Setext 제목(`제목` 다음 줄의 `===`, `---`)을 쓸지 여부. 기본값 false (쓰지 않음).
+     * 끄면 `===` 줄은 그냥 글이고, 문단 바로 아래의 `---`는 수평선입니다.
+     * (`---`가 의도와 달리 윗줄을 제목으로 만드는 일을 막습니다. 제목은 `#`를 씁니다)
+     */
+    setextHeadings?: boolean;
 }
+/** Setext 제목(`===`, `---` 밑줄)을 끄는 문법 설정 */
+export declare const NoSetextHeading: MarkdownConfig;
 /**
  * 확장 마크다운 문법(파서)을 활성화하는 CodeMirror 확장입니다.
  * 시각 스타일(하이라이트 배경, 기호 숨김 등)은 `emphasis()`가 담당합니다.

package/dist/extensions.js

@@ -51,19 +51,21 @@ export const extendedMarkdownSyntax = [
     MathSyntax,
     TableSyntax,
 ];
+/** Setext 제목(`===`, `---` 밑줄)을 끄는 문법 설정 */
+export const NoSetextHeading = { remove: ["SetextHeading"] };
 /**
  * 확장 마크다운 문법(파서)을 활성화하는 CodeMirror 확장입니다.
  * 시각 스타일(하이라이트 배경, 기호 숨김 등)은 `emphasis()`가 담당합니다.
  */
 export function extendedMarkdown(options = {}) {
-    const { markdownConfig = {}, nonTightLists = false, blankLineAfterList = true } = options;
+    const { markdownConfig = {}, nonTightLists = false, blankLineAfterList = true, setextHeadings = false } = options;
     const userExtensions = markdownConfig.extensions ?? [];
     const addKeymap = markdownConfig.addKeymap ?? true;
     return [
         markdown({
             base: markdownLanguage,
             ...markdownConfig,
-            extensions: [extendedMarkdownSyntax, userExtensions],
+            extensions: [extendedMarkdownSyntax, setextHeadings ? [] : NoSetextHeading, userExtensions],
             // 기본 키맵은 Enter 동작을 바꿀 수 없으므로 끄고, 아래에서 같은 우선순위로 다시 등록합니다.
             addKeymap: false,
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdsquare",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Hybrid (live preview) Markdown editor built on CodeMirror 6: tables, callouts, math, code blocks, footnotes and more",
   "keywords": [
     "markdown",