mdsquare 0.2.0 → 0.3.0

package/README.md

@@ -63,7 +63,7 @@ async function openFile(file: File) {
 | `features` | 모두 켬 | 기능 끄기. 예: `{ table: false, math: false }` |
 | `codeBlock` | – | `{ languages, theme, copyButton }`. 언어는 기본으로 `@codemirror/language-data`(쓸 때 불러옴), VS Code 테마는 `vscodeTheme(json)` |
 | `image` | – | `{ resolveUrl }`: 상대 경로 이미지 주소 바꾸기 |
-| `link` | – | `{ openLink }`: 링크를 눌렀을 때 |
+| `link` | – | `{ openLink, favicon, fetchTitle, maxTitleLength }`: 링크를 눌렀을 때, 사이트 아이콘(기본 켬), 빈 라벨 링크의 페이지 제목. 아래 참고 |
 | `math` | – | `{ katex }`: KaTeX 옵션 (매크로 등) |
 | `tikz` | 끔 | 주면 TikZ 그림을 켭니다. 아래 참고 |
 | `markdown` | – | 목록 Enter 동작 등 문법 옵션 |
@@ -98,6 +98,68 @@ new MDSquareEditor({
 });
 ```
 
+### 링크: 사이트 아이콘과 페이지 제목
+
+http(s) 링크 앞에 사이트 아이콘(favicon)을 보여줍니다. 기본은 그 사이트의 `/favicon.ico`이고, 불러오지 못하면 기본 링크 아이콘을 그립니다.
+아이콘을 불러올 때 링크된 사이트에 요청이 가므로, 원하지 않으면 끄거나 아이콘 주소를 직접 정할 수 있습니다.
+
+```ts
+new MDSquareEditor({
+  parent,
+  link: {
+    favicon: false, // 끄기
+    // 또는 아이콘 서비스 사용 (null을 돌려주면 기본 링크 아이콘)
+    // favicon: (url) => `https://www.google.com/s2/favicons?sz=32&domain=${url.hostname}`,
+  },
+});
+```
+
+라벨이 빈 링크 `[](https://...)`는 `fetchTitle`을 주면 페이지 제목을 가져와 보여줍니다. (없으면 주소를 보여줌)
+원문은 바꾸지 않고 화면에만 보여주며, 제목이 길면 `maxTitleLength`(기본 40칸, 한글 등 넓은 글자는 2칸)에서 잘라 "…"를 붙입니다.
+전체 제목과 주소는 마우스를 올리면 보입니다. 주소마다 한 번만 가져오고, 커서가 링크 안에 있을 때(입력 중)는 가져오지 않습니다.
+
+브라우저는 CORS 때문에 다른 사이트의 HTML을 직접 읽을 수 없으므로 **서버가 대신 받아 주는 주소**가 필요합니다.
+`fetchPageTitle`은 받은 HTML에서 제목(`og:title` → `<title>`)을 읽고, EUC-KR 같은 문자 집합도 처리합니다.
+
+```ts
+import MDSquareEditor, { fetchPageTitle } from "mdsquare";
+
+new MDSquareEditor({
+  parent,
+  link: {
+    // 서버의 /api/page?url=... 가 그 페이지의 HTML(과 원래 Content-Type)을 돌려준다고 할 때
+    fetchTitle: (url) => fetchPageTitle(url, { proxy: (u) => `/api/page?url=${encodeURIComponent(u)}` }),
+    // Electron/Tauri처럼 CORS 제한이 없으면: fetchTitle: (url) => fetchPageTitle(url)
+  },
+});
+```
+
+중계 서버는 아무 주소나 받아 주면 내부망 접근(SSRF)에 쓰일 수 있으므로, 실제 서비스에서는 http(s)만 허용하고 내부 주소를 막으세요.
+플레이그라운드는 개발 서버(`vite.config.ts`의 `pageProxy`)가 이 역할을 합니다.
+
+### 각주
+
+`[^라벨]`로 참조하고 `[^라벨]: 내용`으로 정의합니다. 정의 아래 **4칸 들여쓴 줄**은 모두 그 각주의 내용이라
+여러 문단, 표, 수식, 코드, 목록, 이미지, TikZ를 넣을 수 있습니다. (GitHub, Pandoc과 같은 방식)
+
+```markdown
+본문에 각주[^1]를 답니다.
+
+[^1]: 첫 문단입니다.
+
+    | 상수 | 값 |
+    | --- | --- |
+    | $c$ | 299,792,458 m/s |
+
+    $$
+    E = mc^2
+    $$
+```
+
+- 참조에 마우스를 올리면 각주 내용을 **읽기 전용 작은 에디터**로 보여줍니다. 본문 에디터의 설정을 그대로 쓰므로
+  켜 둔 기능(표, 수식, TikZ, 코드 강조, 이미지 주소 변환, 테마)이 본문과 똑같이 그려집니다. 길면 툴팁 안에서 스크롤합니다.
+- 각주 안에서 Enter를 누르면 새 줄도 4칸 들여씁니다. 빈 줄 다음의 들여쓴 빈 줄에서 Enter를 누르면 각주 밖으로 나갑니다.
+
 ### CodeMirror 확장으로 쓰기
 
 에디터를 직접 구성하려면 확장을 가져와 씁니다.
@@ -149,9 +211,15 @@ TikZ를 켜는 앱이 TikZJax 파일을 직접 제공하므로, 그 앱은 TikZJ
 - [x] Image
   1. [x] Caption / Size / Align: `![caption|300x200|center](url)`
 - [x] Link
+  1. [x] 사이트 아이콘(favicon): http(s) 링크 앞에 표시 (`link.favicon`)
+  2. [x] 빈 라벨 링크 `[](url)`의 페이지 제목 가져오기, 길면 말줄임 (`link.fetchTitle`, `maxTitleLength`)
 - [x] HorizontalRule
 - [x] Footnote
-  1. [ ] Tooltip 디자인 변경 (현재: `src/footnote.ts`의 `.cm-footnote-tooltip` 기본 스타일)
+  1. [x] Tooltip 디자인 변경: 둥근 카드(옅은 테두리·옅은 그림자, 밝게/어둡게), 라벨 배지 머리, 살짝 떠오르는 등장(동작 줄이기 설정이면 끔). 정의가 없으면 빨간 배지와 "정의되지 않은 각주입니다."
+  2. [x] 여러 블록 각주: 4칸 들여쓴 줄이 각주 내용 (문단, 표, 수식, 코드, 목록, 인용·콜아웃, 이미지, TikZ). 들여쓰지 않은 줄은 문단을 이어 쓸 때만 붙음(게으른 이어쓰기), 빈 줄 뒤 들여쓰지 않은 줄은 각주 밖
+  3. [x] 툴팁 = 읽기 전용 작은 에디터: 본문 설정을 그대로 이어받아 본문과 똑같이 그림. 여러 줄이면 너비 480px, 한 줄이면 내용 너비, 높이 최대 360px(넘치면 스크롤). 툴팁 안 각주 참조도 원래 문서의 정의를 씀
+  4. [x] Enter: 각주 안 새 줄은 4칸 들여쓰기 유지 (목록 이어쓰기·목록 끝내기 포함), 빈 줄 다음 들여쓴 빈 줄에서 Enter로 각주 밖으로
+  5. [x] 정의 구분: 라벨 배지 + 왼쪽 레일 + 정의마다 위 간격. 마우스를 올린 정의는 레일이 진해지고, 참조를 눌러 이동하면 정의가 잠깐 반짝임
 - [x] CodeBlock (Fenced Code)
   1. [x] 구문 강조: CodeMirror 언어 파서(Lezer), 블록마다 따로 파싱·증분 파싱 (`languages`에 `@codemirror/language-data` 등)
   2. [x] VS Code 색 테마: `vscodeTheme(json)` (JSON/JSONC, TextMate 스코프 매칭. Lezer 문법이 구분하지 않는 일부 토큰은 근사)
@@ -199,20 +267,36 @@ TikZ를 켜는 앱이 TikZJax 파일을 직접 제공하므로, 그 앱은 TikZJ
 
 문법마다 화면 디자인(색, 간격, 기호 표시, 위젯 모양, 어두운 테마)을 다듬습니다.
 
-- [ ] Emphasis (굵게, 기울임, 취소선, 밑줄, 하이라이트)
-- [ ] Inline Code
-- [ ] Escape
-- [ ] Heading
-- [ ] HashTag
-- [ ] Mention
-- [ ] Bullet List / Ordered List
-- [ ] Task List
-- [ ] Image
-- [ ] Link
-- [ ] HorizontalRule
-- [ ] Footnote (툴팁 디자인 포함)
-- [ ] CodeBlock
-- [ ] Quote
+- 기본 폰트: Pretendard (openTypes: calt case salt tnum zero ss01 ss02 ss03 ss05 ss06 ss08)
+- [x] Emphasis (굵게, 기울임, 취소선, 밑줄, 하이라이트)
+- [x] Inline Code -> font를 바꿔야 함. (Jetendard)
+- [x] CodeBlock -> font를 바꿔야 함. (Jetendard)
+- [x] Escape
+- [x] Heading
+- [x] HashTag
+- [x] Mention
+- [x] Bullet List
+  - 불릿을 글자(•, ◦, ▪) 대신 CSS 도형으로 그림: 깊이 1 채운 원, 2 빈 원, 3 채운 사각형 (4부터 반복). 크기는 글자의 0.35배(본문 약 4.6px, 사각형은 원의 약 0.9배)
+  - 너비는 원래 기호 `-`와 같은 한 글자로 고정 (예전에는 `◦`가 대체 글꼴로 넓어져 둘째 깊이 들여쓰기가 어긋났음)
+- [x] Ordered List
+- [x] Task List
+- [x] Image
+- [x] Link
+  - 인라인 코드(회색 박스)와 구분: 옅은 파랑 박스 + 파란 글자 (밝게 `#0969da` / 어둡게 `#58a6ff`), 올리면 박스가 진해짐. 제목 안에서도 링크 색
+  - 박스 안에 사이트 아이콘(글자 높이 정사각형)과 라벨을 함께. 어두운 테마에서는 검은 아이콘(GitHub 등)이 보이도록 밝은 바탕
+  - 박스가 있으므로 구문 강조의 링크 밑줄은 없앰 (라벨 안 취소선·밑줄 문법은 유지)
+- [x] HorizontalRule
+- [ ] Footnote
+  - [x] 툴팁: 예전 스타일은 CodeMirror hover 툴팁 구조(바깥 `.cm-tooltip-hover` 안의 section)와 맞지 않아 적용되지 않았음 (여백·너비 제한 없음). 카드 모양을 바깥 상자에 주도록 고침. 참조와 6px 간격
+  - [x] 툴팁 내용: 읽기 전용 작은 에디터 (표, 수식, TikZ, 코드, 이미지가 본문과 똑같이). 테두리·줄 번호·현재 줄 강조·표 손잡이 없이 내용만
+  - [x] 각주 안 코드 블록은 각주의 작은 글자 크기를 받지 않음 (코드 상자 정렬이 줄 글자 크기 기준)
+  - [x] 정의 줄: 라벨은 둥근 배지(툴팁 머리와 같은 모양, 최소 3칸 + 간격 1칸 = 이어지는 줄 들여쓰기 4칸이라 내용이 같은 열에서 시작). 라벨이 2칸보다 넓은 여러 줄 정의는 배지를 따로 한 줄에 그려 내용 열을 맞춤. `]:` 뒤 공백은 숨김
+  - [x] 왼쪽 레일(정의의 모든 줄, 인용 줄은 인용 세로줄), 정의마다 위 간격 0.6em(레일은 간격 아래부터), 마우스 올리면 레일 진하게, 참조에서 이동해 오면 1.2초 반짝임
+  - [x] 참조(위첨자) 디자인
+- [x] Quote
+  - 배경·그림자 없이 왼쪽 세로줄 + 차분한 글자색(밝게 `#475569` / 어둡게 `#a3adbb`). 콜아웃(색 배경 상자 + 아이콘 제목)과 구분
+  - 세로줄: 슬레이트색 3px, 가장 바깥 인용의 위·아래 끝은 둥글게. 세로줄과 글 사이 간격 16px
+  - 목록·각주 안 인용은 세로줄을 `>` 앞 들여쓰기만큼 옮겨 글 바로 앞에, 콜아웃 안 인용은 상자 안 글자 위치에서 시작. 각주 안 인용 줄에도 각주 레일이 이어짐
 - [ ] GFM Alert (Obsidian Callout)
 - [ ] LaTeX (KaTeX)
 - [ ] TikZ

package/dist/callout.js

@@ -222,6 +222,7 @@ const CONTAINERS = new Set([
     "BulletList",
     "OrderedList",
     "ListItem",
+    "FootnoteDefinition",
 ]);
 const markerSource = Decoration.mark({ class: "cm-formatting cm-formatting-callout" });
 const titleText = Decoration.mark({ class: "cm-callout-title-text" });
@@ -434,6 +435,8 @@ function themeSpec() {
             // 내용 영역을 다른 블록(코드 블록 등)에도 알려줍니다. (utils/container.ts)
             "--cm-container-indent": px(inset + TEXT),
             "--cm-container-right": px(inset + PAD),
+            // 콜아웃 안의 일반 인용은 상자 안 글자 위치에서 세로줄을 그립니다. (quote.ts)
+            "--cm-quote-base": px(inset + TEXT),
         };
     }
     // 2·3단계 상자: 바깥 상자 안쪽으로 들인 가상 요소

package/dist/codeBlock.js

@@ -391,6 +391,7 @@ const CONTAINERS = new Set([
     "BulletList",
     "OrderedList",
     "ListItem",
+    "FootnoteDefinition",
 ]);
 function codeBlockPlugin(languages, theme, copyButton) {
     return createRevealPlugin({
@@ -423,7 +424,8 @@ function codeBlockPlugin(languages, theme, copyButton) {
                         let inList = false;
                         let inQuote = false; // 인용(콜아웃 포함) 안이면 위아래 여백
                         for (let p = node.node.parent; p; p = p.parent) {
-                            if (p.name === "ListItem")
+                            // 각주 정의의 4칸 들여쓰기도 목록 들여쓰기처럼 처리합니다.
+                            if (p.name === "ListItem" || p.name === "FootnoteDefinition")
                                 inList = true;
                             else if (p.name === "Blockquote")
                                 inQuote = true;

package/dist/extensions.d.ts

@@ -23,7 +23,7 @@ export { listIndent, listKeymap, indentListItem, outdentListItem } from "./listI
 export { endListWithBlankLine } from "./listEnter.js";
 export { list, listPlugin, taskMarkersHandled } from "./list.js";
 export { task, taskPlugin, toggleTask } from "./task.js";
-export { isSafeUrl, link, linkPlugin, openLinkSafely, readInlineLink, type InlineLink, type LinkOptions, } from "./link.js";
+export { decodeHtml, defaultFavicon, fetchPageTitle, isSafeUrl, link, linkPlugin, openLinkSafely, parseHtmlTitle, readInlineLink, truncateTitle, type FetchPageTitleOptions, type InlineLink, type LinkOptions, } from "./link.js";
 export { image, parseImageAlt, readImage, type ImageAlign, type ImageAltOptions, type ImageInfo, type ImageOptions, } from "./image.js";
 export { horizontalRule, horizontalRuleField } from "./horizontalRule.js";
 export { quote, quotePlugin } from "./quote.js";
@@ -38,7 +38,7 @@ export { codeBlock, languageLabel, readFencedCode, renderedCodeLanguages, type C
 export { defaultCodeTheme, vscodeTheme, type CodeTheme, type VSCodeThemeJson, type VSCodeThemeOptions, } from "./codeTheme.js";
 export { parseJsonc, textMateTheme, type TextMateTheme, type TokenColorRule, type TokenStyle } from "./textMate.js";
 export { calloutsHandled, defaultCalloutTitle, readCalloutHeader, type CalloutHeader, type CalloutType, } from "./calloutHeader.js";
-export { footnote, footnotePlugin, footnoteDefinitions, footnoteTooltipAt, renderFootnoteDefinition, type FootnoteDefinitionInfo, } from "./footnote.js";
+export { footnote, footnotePlugin, footnoteDefinitions, footnoteContent, footnotePreviewState, footnoteTooltipAt, isFootnotePreview, type FootnoteDefinitionInfo, } from "./footnote.js";
 export { createRevealField, createRevealPlugin, RevealPluginValue, type RevealContext, type RevealFieldSpec, type RevealFieldValue, type RevealPluginSpec, } from "./utils/reveal.js";
 /** 이 플러그인이 제공하는 Lezer Markdown 문법 확장 목록 */
 export declare const extendedMarkdownSyntax: MarkdownExtension[];

package/dist/extensions.js

@@ -24,7 +24,7 @@ export { listIndent, listKeymap, indentListItem, outdentListItem } from "./listI
 export { endListWithBlankLine } from "./listEnter.js";
 export { list, listPlugin, taskMarkersHandled } from "./list.js";
 export { task, taskPlugin, toggleTask } from "./task.js";
-export { isSafeUrl, link, linkPlugin, openLinkSafely, readInlineLink, } from "./link.js";
+export { decodeHtml, defaultFavicon, fetchPageTitle, isSafeUrl, link, linkPlugin, openLinkSafely, parseHtmlTitle, readInlineLink, truncateTitle, } from "./link.js";
 export { image, parseImageAlt, readImage, } from "./image.js";
 export { horizontalRule, horizontalRuleField } from "./horizontalRule.js";
 export { quote, quotePlugin } from "./quote.js";
@@ -39,7 +39,7 @@ export { codeBlock, languageLabel, readFencedCode, renderedCodeLanguages, } from
 export { defaultCodeTheme, vscodeTheme, } from "./codeTheme.js";
 export { parseJsonc, textMateTheme } from "./textMate.js";
 export { calloutsHandled, defaultCalloutTitle, readCalloutHeader, } from "./calloutHeader.js";
-export { footnote, footnotePlugin, footnoteDefinitions, footnoteTooltipAt, renderFootnoteDefinition, } from "./footnote.js";
+export { footnote, footnotePlugin, footnoteDefinitions, footnoteContent, footnotePreviewState, footnoteTooltipAt, isFootnotePreview, } from "./footnote.js";
 export { createRevealField, createRevealPlugin, RevealPluginValue, } from "./utils/reveal.js";
 /** 이 플러그인이 제공하는 Lezer Markdown 문법 확장 목록 */
 export const extendedMarkdownSyntax = [

package/dist/footnote.d.ts

@@ -1,5 +1,6 @@
-import { type EditorState, type Extension } from "@codemirror/state";
+import { EditorState, type Extension, type StateCommand } from "@codemirror/state";
 import { type Tooltip } from "@codemirror/view";
+import type { SyntaxNode } from "@lezer/common";
 export interface FootnoteDefinitionInfo {
     readonly label: string;
     /** 정의 전체 범위 */
@@ -17,8 +18,28 @@ export interface FootnoteDefinitionInfo {
  */
 export declare function footnoteDefinitions(state: EditorState): ReadonlyMap<string, FootnoteDefinitionInfo>;
 export declare const footnotePlugin: import("@codemirror/view").ViewPlugin<import("./extensions.js").RevealPluginValue, undefined>;
-/** 각주 정의 내용을 서식이 반영된 DOM으로 그립니다. 정의가 없으면 null */
-export declare function renderFootnoteDefinition(state: EditorState, label: string): HTMLElement | null;
+/** 각주 미리보기 에디터인지 */
+export declare function isFootnotePreview(state: EditorState): boolean;
+/**
+ * 각주 정의 내용 (첫 줄은 `[^label]: ` 뒤부터, 이어지는 줄은 4칸 들여쓰기를 뺀 글).
+ * 정의가 없으면 null
+ */
+export declare function footnoteContent(state: EditorState, label: string): string | null;
+/**
+ * 각주 미리보기용 상태: state의 설정을 그대로 쓰고 문서만 content로 바꿉니다. (읽기 전용)
+ * 커서는 끝에 덧붙인 빈 줄에 둬서 어떤 블록도 원문으로 펼쳐지지 않게 합니다.
+ */
+export declare function footnotePreviewState(state: EditorState, content: string): EditorState;
 /** pos(마우스 위치)에 각주 참조가 있으면 그 정의를 보여주는 툴팁 */
 export declare function footnoteTooltipAt(state: EditorState, pos: number, side?: -1 | 1): Tooltip | null;
+/**
+ * 줄이 각주 정의 내용 안이면 그 정의 노드.
+ * 정의 범위 안의 줄, 또는 정의 바로 뒤에 이어지는 들여쓴 빈 줄(공백만 있는 줄)이 해당합니다.
+ */
+export declare function footnoteAtLine(state: EditorState, lineNumber: number): SyntaxNode | null;
+/**
+ * 각주 안의 들여쓴 빈 줄이 빈 줄 바로 다음이면, Enter로 들여쓰기를 지워 각주 밖으로 나갑니다.
+ * (인용에서 빈 줄 두 번으로 나가는 것과 같음)
+ */
+export declare const exitFootnote: StateCommand;
 export declare function footnote(): Extension;