Merge pull request #70 from aydk-xcc/develop

增加换行事例
aydk-xcc · Feb 6, 2024 · ea1a7c3 · ea1a7c3
2 parents 498ff08 + b85154f
commit ea1a7c3
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 59 deletions.
diff --git a/docs/.vuepress/public/img/layout-line.png b/docs/.vuepress/public/img/layout-line.png
diff --git a/docs/editor/interfaces/ICodeEditor.md b/docs/editor/interfaces/ICodeEditor.md
@@ -755,30 +755,15 @@ console.log(myContextKey.get()); // 输出 'default'
 ```
 在这个示例中，我们创建了一个编辑器，并使用 createContextKey 方法创建了一个名为 myContextKey 的上下文键，它的默认值为 'default'。我们通过调用 get 方法来获取当前上下文键的值，输出结果为 'default'。
 
-##  createDecorationsCollection
-+ 语法: `createDecorationsCollection(ownerId: number): IDecorationsController`
-+ 参数: `ownerId`
-+ 返回值: `IDecorationsController`
-+ 描述: `创建一个装饰器集合，用于管理编辑器的装饰器信息`
+## createDecorationsCollection
++ 语法: `createDecorationsCollection(`decorations?: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[]`):` [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 参数: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[] `可选` 
++ 返回值: [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 描述: `创建一个装饰集合。通过此集合添加的所有装饰都将获得编辑器的所有者ID（这意味着它们不会显示在其他编辑器中）。当编辑器的模型更改时，这些装饰将自动清除。`
 
-其中，ownerId 参数是一个数字，用来标识装饰器集合的所有者。
-下面是一个示例，演示如何使用 createDecorationsCollection 方法创建一个装饰器集合：
-```javascript
-const editor = monaco.editor.create(document.getElementById('container'), {
-    value: '',
-    language: 'plaintext'
-});
-
-const decorations = editor.createDecorationsCollection(1);
-
-decorations.createDecoration(1, 1, { isWholeLine: true, className: 'my-decoration' });
-
-editor.deltaDecorations([], decorations.getDecorations());
-```
-在这个示例中，我们创建了一个编辑器，并使用 createDecorationsCollection 方法创建了一个 ownerId 为 1 的装饰器集合。我们通过调用 createDecoration 方法来创建一个装饰器，它的位置为第一行第一列，样式为整行高亮，类名为 my-decoration。最后，我们通过调用 deltaDecorations 方法来将这个装饰器添加到编辑器中。
 
 ##  deltaDecorations
-+ 语法: `deltaDecorations(oldDecorations: string[], newDecorations: IModelDeltaDecoration[]): string[]`
++ 语法: `deltaDecorations(oldDecorations: string[], newDecorations: ` [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md) `[]): string[]`
 + 参数: `oldDecorations, newDecorations`
 + 返回值: `string[]`
 + 描述: `更新编辑器的装饰器信息`

diff --git a/docs/editor/interfaces/IDiffEditor.md b/docs/editor/interfaces/IDiffEditor.md
@@ -31,12 +31,11 @@
 
 ## 方法 Methods
 
-### createDecorationsCollection
-+ 语法: `createDecorationsCollection(decorations?: IModelDeltaDecoration[]): IEditorDecorationsCollection`
-+ 参数: 
-    + decorations: [IModelDeltaDecoration](IModelDeltaDecoration.md) `可选` 
-+ 返回值: [IEditorDecorationsCollection](IEditorDecorationsCollection.md)
-+ 描述: `创建一个装饰品集合。通过这个集合添加的所有装饰品都将获得编辑器的 ownerId（这意味着它们不会出现在其他编辑器中）。当编辑器的模型发生变化时，这些装饰会自动清除。`
+###  createDecorationsCollection
++ 语法: `createDecorationsCollection(`decorations?: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[]`):` [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 参数: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[] `可选` 
++ 返回值: [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 描述: `创建一个装饰集合。通过此集合添加的所有装饰都将获得编辑器的所有者ID（这意味着它们不会显示在其他编辑器中）。当编辑器的模型更改时，这些装饰将自动清除。`
  ### dispose
 + 语法:  `dispose(): void` 
 + 描述:  `释放此小部件使用的所有资源。调用此方法后，小部件将不再被使用。` 

diff --git a/docs/editor/interfaces/IEditor.md b/docs/editor/interfaces/IEditor.md
@@ -9,11 +9,10 @@
 ## 方法 Methods
 
 ### createDecorationsCollection
-+ 语法: `createDecorationsCollection(decorations?: IModelDeltaDecoration[]): IEditorDecorationsCollection`
-+ 参数: 
-    + decorations: [IModelDeltaDecoration](IModelDeltaDecoration.md) `可选` 
-+ 返回值: [IEditorDecorationsCollection](IEditorDecorationsCollection.md)
-+ 描述: `创建一个装饰品集合。通过这个集合添加的所有装饰品都将获得编辑器的 ownerId（这意味着它们不会出现在其他编辑器中）。当编辑器的模型发生变化时，这些装饰会自动清除。`
++ 语法: `createDecorationsCollection(`decorations?: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[]`):` [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 参数: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[] `可选` 
++ 返回值: [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 描述: `创建一个装饰集合。通过此集合添加的所有装饰都将获得编辑器的所有者ID（这意味着它们不会显示在其他编辑器中）。当编辑器的模型更改时，这些装饰将自动清除。`
  ### dispose
 + 语法:  `dispose(): void` 
 + 描述:  `释放此小部件使用的所有资源。调用此方法后，小部件将不再被使用。` 

diff --git a/docs/editor/interfaces/IStandaloneCodeEditor.md b/docs/editor/interfaces/IStandaloneCodeEditor.md
@@ -753,27 +753,11 @@ console.log(myContextKey.get()); // 输出 'default'
 ```
 在这个示例中，我们创建了一个编辑器，并使用 createContextKey 方法创建了一个名为 myContextKey 的上下文键，它的默认值为 'default'。我们通过调用 get 方法来获取当前上下文键的值，输出结果为 'default'。
 
-##  createDecorationsCollection
-+ 语法: `createDecorationsCollection(decorations?: ` [IModelDeltaDecoration](./IModelDeltaDecoration.md) `[]): `[IEditorDecorationsCollection](./IEditorDecorationsCollection.md)
-+ 参数: decorations?: [IModelDeltaDecoration[]](./IModelDeltaDecoration.md)  `可选` 
-+ 返回值: [IEditorDecorationsCollection](./IEditorDecorationsCollection.md)
-+ 描述: `创建一个装饰器集合，用于管理编辑器的装饰器信息`
-
-其中，ownerId 参数是一个数字，用来标识装饰器集合的所有者。
-下面是一个示例，演示如何使用 createDecorationsCollection 方法创建一个装饰器集合：
-```javascript
-const editor = monaco.editor.create(document.getElementById('container'), {
-    value: '',
-    language: 'plaintext'
-});
-
-const decorations = editor.createDecorationsCollection(1);
-
-decorations.createDecoration(1, 1, { isWholeLine: true, className: 'my-decoration' });
-
-editor.deltaDecorations([], decorations.getDecorations());
-```
-在这个示例中，我们创建了一个编辑器，并使用 createDecorationsCollection 方法创建了一个 ownerId 为 1 的装饰器集合。我们通过调用 createDecoration 方法来创建一个装饰器，它的位置为第一行第一列，样式为整行高亮，类名为 my-decoration。最后，我们通过调用 deltaDecorations 方法来将这个装饰器添加到编辑器中。
+## createDecorationsCollection
++ 语法: `createDecorationsCollection(`decorations?: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[]`):` [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 参数: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[] `可选` 
++ 返回值: [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 描述: `创建一个装饰集合。通过此集合添加的所有装饰都将获得编辑器的所有者ID（这意味着它们不会显示在其他编辑器中）。当编辑器的模型更改时，这些装饰将自动清除。`
 
 ##  deltaDecorations
 + 语法: `deltaDecorations(oldDecorations: string[], newDecorations: IModelDeltaDecoration[]): string[]`

diff --git a/docs/editor/interfaces/IStandaloneDiffEditor.md b/docs/editor/interfaces/IStandaloneDiffEditor.md
@@ -106,11 +106,10 @@ editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function(ed) {
 + 描述: ``
 
 ### createDecorationsCollection
-+ 语法: `createDecorationsCollection(decorations?: IModelDeltaDecoration[]): IEditorDecorationsCollection`
-+ 参数: 
-    + decorations: [IModelDeltaDecoration](IModelDeltaDecoration.md) `可选` 
-+ 返回值: [IEditorDecorationsCollection](IEditorDecorationsCollection.md)
-+ 描述: `创建一个装饰品集合。通过这个集合添加的所有装饰品都将获得编辑器的 ownerId（这意味着它们不会出现在其他编辑器中）。当编辑器的模型发生变化时，这些装饰会自动清除。`
++ 语法: `createDecorationsCollection(`decorations?: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[]`):` [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 参数: [IModelDeltaDecoration](../interfaces/IModelDeltaDecoration.md)[] `可选` 
++ 返回值: [IEditorDecorationsCollection](../interfaces/IEditorDecorationsCollection.md)
++ 描述: `创建一个装饰集合。通过此集合添加的所有装饰都将获得编辑器的所有者ID（这意味着它们不会显示在其他编辑器中）。当编辑器的模型更改时，这些装饰将自动清除。`
  ### dispose
 + 语法:  `dispose(): void` 
 + 描述:  `释放此小部件使用的所有资源。调用此方法后，小部件将不再被使用。` 

diff --git a/docs/example/layout.md b/docs/example/layout.md
@@ -26,4 +26,34 @@ order: 3
 
 这个属性设置设置为 true ，则编辑器会在窗口大小发生变化时自动调整大小以适应新的窗口大小。 所以需要注意的是，如果有类似于侧边栏菜单关闭和展开的逻辑，一定要保证编辑器的容器盒子能够自使用宽度变化，否则无法触发编辑器的自适应
 
-:::
+:::
+
+## 文本换行
+
+
+monaco-editor的换行方式，主要分为3种情况：
++ 不换行
++ 按照编辑器宽度换行
++ 按照制定列数换行
+
+主要受[wordwrap](../editor/interfaces/IStandaloneDiffEditorConstructionOptions.md#wordwrap)和[wordwrapcolumn](../editor/interfaces/IStandaloneDiffEditorConstructionOptions.md#wordwrapcolumn
+)控制，具体如下：
+
+
+| 取值 | 含义 |
+|  :---- | :---- |
+| off   |   不换行，会一直滚动 |
+| on   |   换行，文本将在视区宽度内自动换行 |
+| wordWrapColumn   |   当设置为 "wordWrapColumn" 时，文本将在指定的列数处自动换行 |
+| bounded   |   文本将在视区宽度和指定列数的较小值处自动换行。 |
+
+::: danger 
+
+当设置为on的时候，每一行换行的字符数并不是确定的,只是保证字符能够填满
+
+:::
+
+例如下面：
+字母填充84个，虽然没有铺满，依然换行了，数字填充了84个；
+
+![line-column](../../docs/.vuepress/public/img/layout-line.png)