feat: enhance XMindMark syntax with examples for hyperlinks, notes, and folded topics

- Added examples and usage details for new features in the XMindMark syntax documentation.
- Updated HTML to include a link to the npm package and improved the instruction layout in the editor.
- Implemented local storage functionality to save and load editor content.

Author: jinzcdev

README.md

@@ -72,7 +72,7 @@ npm run build
 
 XMindMark syntax is similar to Markdown, using indentation and special symbols to represent the hierarchical structure and relationships of elements in the mind map.
 
-#### Basic Syntax Example:
+#### Basic Syntax Example
 
 ```
 Central Topic
@@ -85,11 +85,14 @@ Central Topic
         - Subsubtopic 2.1.1
 ```
 
-#### Special Features:
+#### Advanced Syntax
 
 - **Relationships**: Use `[number]` and `[^number]` to create connections between topics
 - **Boundaries**: Use `[B]` or `[Bnumber]` to create boundaries
 - **Summaries**: Use `[S]` or `[Snumber]` to create summaries
+- **Hyperlinks**: Use `[L:url]` to add hyperlinks to topics
+- **Notes**: Use `[N:content]` to add text notes to topics
+- **Folding**: Use `[F]` to make topics appear folded
 
 For detailed syntax, please refer to:
 

README_zh-CN.md

@@ -72,7 +72,7 @@ npm run build
 
 XMindMark 语法类似 Markdown，使用缩进和特殊符号表示思维导图的层级结构和元素关系。
 
-#### 基础语法示例:
+#### 基础语法示例
 
 ```
 中心主题
@@ -85,11 +85,14 @@ XMindMark 语法类似 Markdown，使用缩进和特殊符号表示思维导图
         - 子子主题2.1.1
 ```
 
-#### 特殊功能:
+#### 高级语法
 
 - **联系**: 使用 `[数字]` 和 `[^数字]` 创建主题间连接
 - **外框**: 使用 `[B]` 或 `[B数字]` 创建外框
 - **概要**: 使用 `[S]` 或 `[S数字]` 创建概要
+- **超链接**: 使用 `[L:url]` 为主题添加超链接
+- **笔记**: 使用 `[N:内容]` 为主题添加文本笔记
+- **折叠**: 使用 `[F]` 使主题显示为折叠状态
 
 详细语法请参考:
 

docs/specification.md

@@ -222,20 +222,74 @@ Central Topic
     - subtopic 2 [B]
 ```
 
-# Advanced usage
+## Hyperlinks
 
-### Perform multiple marker symbol at one topic
+**_Syntax: `[L:url]` - This marker symbol adds a hyperlink to a topic._**
 
-Every marker symbol of topic must be placed after topic content without any spaces. Like:
+Add a hyperlink to a topic by appending `[L:url]` after the topic content. The URL should be placed inside the brackets without any spaces between `L:` and the URL.
 
+```
+Central Topic
+
+- Topic with hyperlink [L:https://example.com]
+- Another topic
 ```
 
-Seasons of 2021
+Hyperlinks can be combined with other markers:
+
+```
+Central Topic
 
-- Spring [1]
-- Summer [B1]
-- Autumn [B1][^1](Cool)[S1]
-- Winter [S1]
+- Topic with hyperlink and boundary [L:https://example.com][B]
 ```
 
-In the example above, "Summer" and "Autumn" will be wrapped by a boundary, "Autumn" and "Winter" will be wrapped by a summary topic, a relationship will connected "Spring" and "Autumn" with title: "Cool".
+## Notes
+
+**_Syntax: `[N:content]` - This marker symbol adds text notes to a topic._**
+
+Add text notes to a topic by appending `[N:content]` after the topic content. The note content should be placed inside the brackets without any spaces between `N:` and the content.
+
+```
+Central Topic
+
+- Topic with a note [N:This is an important note]
+- Another topic
+```
+
+Notes currently only support plain text content. Complex formatted content or HTML is not supported in the note content.
+
+Notes can be combined with other markers:
+
+```
+Central Topic
+
+- Topic with note and summary [N:Remember this detail][S]
+```
+
+## Folded Topics
+
+**_Syntax: `[F]` - This marker symbol makes a topic appear folded._**
+
+Make a topic appear folded (collapsed) by appending `[F]` after the topic content.
+
+```
+Central Topic
+
+- Folded topic with subtopics [F]
+    * Subtopic 1
+    * Subtopic 2
+```
+
+This is particularly useful for complex mind maps where you want certain branches to be initially collapsed for better readability.
+
+Folding can be combined with other markers:
+
+```
+Central Topic
+
+- Folded topic with boundary [F][B]
+    * Subtopic 1
+    * Subtopic 2
+```
+
+

docs/specification_zh-CN.md

@@ -222,19 +222,72 @@ XMindMark 的第一行将被视为中心主题，之前的任何空行都将被
     - 子主题 2 [B]
 ```
 
-# 高级用法
+## 超链接
 
-### 在一个主题上应用多个标记符号
+**_语法：`[L:url]` - 此标记符号为主题添加超链接。_**
 
-主题的每个标记符号必须放在主题内容之后，中间不能有任何空格。例如：
+通过在主题内容后附加 `[L:url]` 为主题添加超链接。URL 应该放在括号内，`L:` 和 URL 之间不应有任何空格。
 
 ```
-2021年的季节
+中心主题
+
+- 带超链接的主题 [L:https://example.com]
+- 其他主题
+```
+
+超链接可以与其他标记组合使用：
+
+```
+中心主题
+
+- 带超链接和外框的主题 [L:https://example.com][B]
+```
+
+## 笔记
+
+**_语法：`[N:内容]` - 此标记符号为主题添加文本笔记。_**
+
+通过在主题内容后附加 `[N:内容]` 为主题添加文本笔记。笔记内容应该放在括号内，`N:` 和内容之间不应有任何空格。
 
-- 春季 [1]
-- 夏季 [B1]
-- 秋季 [B1][^1](凉爽)[S1]
-- 冬季 [S1]
 ```
+中心主题
+
+- 带笔记的主题 [N:这是一个重要的笔记]
+- 其他主题
+```
+
+笔记目前只支持纯文本内容。笔记内容中不支持复杂的格式化内容或HTML。
+
+笔记可以与其他标记组合使用：
+
+```
+中心主题
+
+- 带笔记和概要的主题 [N:记住这个细节][S]
+```
+
+## 折叠主题
+
+**_语法：`[F]` - 此标记符号使主题显示为折叠状态。_**
+
+通过在主题内容后附加 `[F]` 使主题显示为折叠（收起）状态。
+
+```
+中心主题
+
+- 带子主题的折叠主题 [F]
+    * 子主题 1
+    * 子主题 2
+```
+
+这对于复杂的思维导图特别有用，您可以让某些分支初始时折叠以提高可读性。
+
+折叠可以与其他标记组合使用：
+
+```
+中心主题
 
-在上面的示例中，"夏季"和"秋季"将被一个外框包围，"秋季"和"冬季"将被一个概要主题包围，一个标题为"凉爽"的关系将连接"春季"和"秋季"。
+- 带外框的折叠主题 [F][B]
+    * 子主题 1
+    * 子主题 2
+```

docs/xmindmark-syntax.md

@@ -67,7 +67,33 @@ XMindMark Syntax Guide
         - Relationships can connect to boundary or summary titles
 [B] Advanced Syntax
 
-- Notes [S]
+- Hyperlinks Syntax
+    * Syntax
+        - Use [L:url] to add hyperlink to topic
+        - Example: GitHub Website [L:https://github.com]
+    * Usage
+        - Can be applied to any topic including central topic
+        - Can be combined with other markers
+
+- Notes Syntax
+    * Syntax
+        - Use [N:content] to add notes to topic
+        - Example: Meeting Topic [N:Remember to prepare slides]
+    * Limitations
+        - Only supports plain text, no complex formatting
+        - Cannot contain nested markers
+
+- Folded Topics Syntax
+    * Syntax
+        - Use [F] to make a topic appear folded
+        - Example: Project Details [F]
+            - Subtopic 1
+            - Subtopic 2
+    * Behavior
+        - Child topics will be hidden by default in the mind map
+        - Useful for large mind maps with many branches
+
+- Usage Tips [S]
     * Marker Rules
         - Markers must directly follow topic content (no spaces)
         - Numbers can be non-consecutive

docs/xmindmark-syntax_zh-CN.md

@@ -19,12 +19,12 @@ XMindMark 语法教程
             [S1] 概要
     [B1] 基础语法
 
-- 联系语法
+- 关系语法
     * 语法规则
         - 使用 [<数字>] 标记源主题[1]
         - 使用 [^<数字>] 标记目标主题
-        - 相同数字创建联系
-    * 联系标题[^1](联系标题)
+        - 相同数字创建关系
+    * 关系标题[^1](关系标题)
         - 在 [^<数字>] 后添加(标题内容)
 
 - 外框语法
@@ -67,7 +67,33 @@ XMindMark 语法教程
         - 联系可以连接到外框或概要标题
 [B] 进阶语法
 
-- 注意事项 [S]
+- 超链接语法
+    * 语法
+        - 使用 [L:url] 为主题添加超链接
+        - 例如：GitHub网站 [L:https://github.com]
+    * 用法
+        - 可应用于任何主题，包括中心主题
+        - 可与其他标记组合使用
+
+- 笔记语法
+    * 语法
+        - 使用 [N:内容] 为主题添加笔记
+        - 例如：会议主题 [N:记得准备幻灯片]
+    * 限制
+        - 仅支持纯文本，不支持复杂格式
+        - 不能包含嵌套标记
+
+- 折叠主题语法
+    * 语法
+        - 使用 [F] 使主题显示为折叠状态
+        - 例如：项目细节 [F]
+            - 子主题 1
+            - 子主题 2
+    * 行为
+        - 子主题在思维导图中默认会被隐藏
+        - 适用于具有多个分支的大型思维导图
+
+- 使用提示 [S]
     * 标记规则
         - 标记必须紧跟主题内容（无空格）
         - 数字可以不连续

index.html

@@ -46,6 +46,15 @@
           <span class="logo-tag">XMind Online Editor</span>
         </div>
         <div class="github-link">
+          <a
+            href="https://www.npmjs.com/package/@markxmind/markxmind-core"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="npm-link"
+            title="@markxmind/markxmind-core on npm"
+          >
+            <img src="https://img.shields.io/npm/v/@markxmind/markxmind-core.svg" alt="npm version" />
+          </a>
           <a href="https://github.com/jinzcdev/markxmind/stargazers" target="_blank" class="github-stars">
             <img src="https://img.shields.io/github/stars/jinzcdev/markxmind" alt="GitHub Stars" />
           </a>
@@ -95,7 +104,17 @@
             </svg>
             Choose File <small>(.xmind / .xmindmark / .md / .txt)</small>
           </label>
-          <div class="instruction">Or edit your mind map below:</div>
+          <div class="instruction-row">
+            <span class="instruction">Or edit your mind map below:</span>
+            <div class="example-segment" role="group" aria-label="Load example">
+              <button type="button" id="load-example-en" class="example-segment-btn" title="Load English example">
+                EN
+              </button>
+              <button type="button" id="load-example-cn" class="example-segment-btn" title="Load Chinese example">
+                中
+              </button>
+            </div>
+          </div>
           <div id="input" class="editor-container"></div>
         </div>
         <div id="resizer"></div>