Home

Home (EN)

Welcome to the TW5-CodeMirror-Enhanced wiki!

This plugin implements a framework on CodeMirror and uses some great features of TiddlyWiki to simplify the API usage. The homepage try to make you understand the framework structure.

Framework Structure

The framework can be divided into four bottom-up layers.

• The bottom layer is the system layer of the original CodeMirror and TiddlyWiki.
• On top of the system layer, using some hacking means to build the core layer, which implements service management, text syntax parsing, syntax highlighting, and so on.
• Based on the various APIs provided by the core layer (especially the ServiceManager module), various editor service modules are registered, such as the auto-completion service module, the WYSIWYG service module, etc. These service modules in turn will provide a series of further APIs. the responsibility of the various service modules is to load and execute their respective extension plugins.
• Each service module provides a set of plug-in interface implementation specifications, anyone can follow the specification to write and register a plug-in of the service. These plug-ins form the fourth layer of the framework.

The following tiddler names auto-completion plug-in as an example of how the framework works.

The src/addon/hint/hint-tw5-tiddler.js plugin implements the interface specification of the service module src/core/services/hint/RealtimeHint.ts and registers it as a service by adding the $:/CodeMirrorEnhanced/ RealtimeHint tag to register as a plugin for this service module. When your Wiki loads, the framework will first load the RealtimeHint service module and do the initialization work. When some tiddler enters the editing state and instantiates a CodeMirror editor instance, RealtimeHint will enter the working state and, as you type each character, call all the registered plugins to get a list of complimentary suggestions, and pops up the complementary suggestions box, and renders the complementary suggestions preview box (on the right side of the complementary suggestions list box).

Later chapters explain in a hierarchy how each of these modules works, and how to create and register a service and plug-in.

Home (ZH)

欢迎阅读 TW5-CodeMirror-Enhanced 的维基！

这个插件在CodeMirror上实现了一个框架，并使用TiddlyWiki的一些很棒的特性来简化API的使用。首页尝试为你介绍这个框架。

框架结构

框架可以被划分为自底向上的四层：

• 最底层是原始CodeMirror和TiddlyWiki的系统层。
• 在系统层之上，使用一些骇客手段构建核心层，核心层实现服务管理、文本语法解析、语法高亮等工作。
• 基于核心层提供的各种API（尤其是ServiceManager模块），注册各种编辑器服务模块，如自动补全服务模块、所见即所得服务模块等，这些服务模块又将进一步提供一系列的API。各种服务模块的职责是加载和执行各自的扩展插件。
• 每一个服务模块都提供一套插件接口实现规范，任何人都可以依照该规范编写并注册该服务的一个插件。这些插件构成框架的第四层。

下面用tiddler名称自动补全插件为例，介绍框架的工作原理：

src/addon/hint/hint-tw5-tiddler.js插件实现了服务模块src/core/services/hint/RealtimeHint.ts的接口规范，并通过添加$:/CodeMirrorEnhanced/RealtimeHint标签注册为该服务模块的插件。在你的Wiki加载时，框架会首先加载RealtimeHint服务模块并进行初始化工作，在某个tiddler进入编辑状态并实例化一个CodeMirror编辑器实例时，RealtimeHint就会进入工作状态，在你输入每个字符时，调用所有被注册的插件获得补全建议列表，并弹出补全建议框、渲染补全建议预览框（在补全建议列表框的右侧）。

后面的章节会分层次解释其中的每一个模块的工作方法，以及如何创建和注册一个服务和插件。