feat: support emoji

examples/data/src/docs/default-document-data-cn.ts

@@ -8,7 +8,7 @@ export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
  lists: DEFAULT_LIST_TEST,
  body: {
  dataStream:
- '零.  开篇\r上标和下标：HO2 5X 删除线：我是被删除的内容 下划线：我是下划线\r这篇文章旨在帮助新人快速熟悉开조선어univer的架构及代码，也是我过去一段时间参与到 univer 开发中的学习和总结，肯定有不够准确或者理解偏差，欢迎大家评论指正\r第壹章，会聊聊我对univer架构的理解，univer是如何拆分模块，以及模块之间的依赖关系。然后将univer放入MMV的架构模式中，分别分析下其模型层、视图层、控制器的边界和职责\r第贰章，我们先来看看 univer sheet 的模型层数据结构设计，如何区分 workbook、sheet、row、column、style 等，了解他们的包含关系，这对后面深入理解代码是有帮助的\r第叁、肆章，我将从两条控制链路来分析 univer 的代码，一条链路是 univer 启动和初始化渲染的过程。在这条链路中，是从模型层到视图层的过程。另外一条链路是 univer 响应用户事件，并且触发模型层数据变更，页面重新渲染，在这条链路中，是从视图层到模型层的过程。在这两部分，我们会涉及到大量的源码分析，在保留代码主逻辑的前提，删除了边界 case 的代码。同时在每个代码块第一行，表示该代码块所在的 TS 文件，这样便于直接阅读源码\r\n',
+ '零.  开篇\r上标和下标：HO2 5X 👦线：👨‍👩‍👧‍👦线：我是下划线\r这篇文章旨在帮助新人快速熟悉开조선어univer的架构及代码，也是我过去一段时间参与到 univer 开发中的学习和总结，肯定有不够准确或者理解偏差，欢迎大家评论指正\r第壹章，会聊聊我对univer架构的理解，univer是如何拆分模块，以及模块之间的依赖关系。然后将univer放入MMV的架构模式中，分别分析下其模型层、视图层、控制器的边界和职责\r第贰章，我们先来看看 univer sheet 的模型层数据结构设计，如何区分 workbook、sheet、row、column、style 等，了解他们的包含关系，这对后面深入理解代码是有帮助的\r第叁、肆章，我将从两条控制链路来分析 univer 的代码，一条链路是 univer 启动和初始化渲染的过程。在这条链路中，是从模型层到视图层的过程。另外一条链路是 univer 响应用户事件，并且触发模型层数据变更，页面重新渲染，在这条链路中，是从视图层到模型层的过程。在这两部分，我们会涉及到大量的源码分析，在保留代码主逻辑的前提，删除了边界 case 的代码。同时在每个代码块第一行，表示该代码块所在的 TS 文件，这样便于直接阅读源码👨‍👩‍👦👨‍👩‍👧‍👦👨‍👩‍👦‍👦👨‍👨‍👦👨‍👨‍👧‍👦👨‍👨‍👦‍👦👩‍👩‍👦👩‍👩‍👧‍👦👩‍👩‍👦‍👦👨‍👦👨‍👦‍👦👨‍👧‍👦👩‍👦👩‍👦‍👦👩‍👧‍👦🧒👧👼\r\n',
  textRuns: [
  {
  st: 0,
@@ -700,7 +700,7 @@ export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
  },
  {
  st: 527,
- ed: 540,
+ ed: 678,
  ts: {
  fs: 14,
  ff: 'Microsoft YaHei',
@@ -766,7 +766,7 @@ export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
  },
  },
  {
- startIndex: 540,
+ startIndex: 678,
  paragraphStyle: {
  spaceAbove: 20,
  lineSpacing: 2,

packages/docs/src/commands/commands/core-editing.command.ts

@@ -128,6 +128,7 @@ export interface IDeleteCommandParams {
  range: ITextRange;
  direction: DeleteDirection;
  textRanges: ITextRangeWithStyle[];
+ len?: number;
  segmentId?: string;
 }
 
@@ -144,7 +145,8 @@ export const DeleteCommand: ICommand<IDeleteCommandParams> = {
  const undoRedoService = accessor.get(IUndoRedoService);
  const textSelectionManagerService = accessor.get(TextSelectionManagerService);
 
- const { range, segmentId, unitId, direction, textRanges } = params;
+ const { range, segmentId, unitId, direction, textRanges, len = 1 } = params;
+
  const { collapsed, startOffset } = range;
  const doMutation: IMutationInfo<IRichTextEditingMutationParams> = {
  id: RichTextEditingMutation.id,
@@ -158,14 +160,14 @@ export const DeleteCommand: ICommand<IDeleteCommandParams> = {
  if (startOffset > 0) {
  doMutation.params!.mutations.push({
  t: 'r',
- len: direction === DeleteDirection.LEFT ? startOffset - 1 : startOffset,
+ len: direction === DeleteDirection.LEFT ? startOffset - len : startOffset,
  segmentId,
  });
  }
 
  doMutation.params!.mutations.push({
  t: 'd',
- len: 1,
+ len,
  line: 0,
  segmentId,
  });

packages/docs/src/controllers/clipboard.controller.ts

@@ -100,6 +100,8 @@ export class DocClipboardController extends Disposable {
  try {
  const body = await clipboard.queryClipboardData();
 
+ console.log(body);
+
  // When doc has multiple selections, the cursor moves to the last pasted content's end.
  let cursor = activeEndOffset;
  for (const range of ranges) {

packages/docs/src/controllers/delete.controller.ts

@@ -95,11 +95,12 @@ export class DeleteController extends Disposable {
 
  let cursor = startOffset;
 
- if (collapsed === true) {
- cursor--;
- }
+ console.log(startOffset);
 
- const span = skeleton.findNodeByCharIndex(cursor);
+ // Get the deleted span.
+ const span = skeleton.findNodeByCharIndex(startOffset - 1);
+
+ console.log(preSpan, span);
 
  const isUpdateParagraph =
  isFirstSpan(preSpan) && span !== preSpan && (preIsBullet === true || preIsIndent === true);
@@ -111,8 +112,6 @@ export class DeleteController extends Disposable {
  return;
  }
 
- cursor++;
-
  const paragraphIndex = paragraph?.startIndex;
 
  const updateParagraph: IParagraph = { startIndex: 0 };
@@ -148,6 +147,8 @@ export class DeleteController extends Disposable {
  },
  ];
 
+ console.log(startOffset);
+
  this._commandService.executeCommand(UpdateCommand.id, {
  unitId: docDataModel.getUnitId(),
  updateBody: {
@@ -157,7 +158,7 @@ export class DeleteController extends Disposable {
  range: {
  startOffset: paragraphIndex,
  endOffset: paragraphIndex + 1,
- collapsed: true,
+ collapsed: false,
  },
  textRanges,
  coverType: UpdateDocsAttributeType.REPLACE,
@@ -174,6 +175,8 @@ export class DeleteController extends Disposable {
  }
 
  if (collapsed === true) {
+ cursor -= span!.count;
+
  const textRanges = [
  {
  startOffset: cursor,
@@ -187,6 +190,7 @@ export class DeleteController extends Disposable {
  range: activeRange,
  segmentId,
  direction: DeleteDirection.LEFT,
+ len: span!.count,
  textRanges,
  });
  } else {
@@ -232,12 +236,15 @@ export class DeleteController extends Disposable {
  },
  ];
 
+ const needDeleteSpan = skeleton.findNodeByCharIndex(startOffset);
+
  this._commandService.executeCommand(DeleteCommand.id, {
  unitId: docDataModel.getUnitId(),
  range: activeRange,
  segmentId,
  direction: DeleteDirection.RIGHT,
  textRanges,
+ len: needDeleteSpan!.count,
  });
  } else {
  const textRanges = this._getTextRangesWhenDelete();

packages/docs/src/controllers/move-cursor.controller.ts

@@ -128,7 +128,10 @@ export class MoveCursorController extends Disposable {
  const dataStreamLength = docDataModel.getBody()!.dataStream.length ?? Infinity;
 
  if (direction === Direction.LEFT || direction === Direction.RIGHT) {
- focusOffset = direction === Direction.RIGHT ? ++focusOffset : --focusOffset;
+ const preSpan = skeleton.findNodeByCharIndex(focusOffset - 1)!;
+ const curSpan = skeleton.findNodeByCharIndex(focusOffset)!;
+
+ focusOffset = direction === Direction.RIGHT ? focusOffset + curSpan.count : focusOffset - preSpan.count;
 
  focusOffset = Math.min(dataStreamLength - 2, Math.max(0, focusOffset));
 
@@ -214,11 +217,14 @@ export class MoveCursorController extends Disposable {
 
  cursor = direction === Direction.LEFT ? min : max;
  } else {
+ const preSpan = skeleton.findNodeByCharIndex(startOffset - 1)!;
+ const curSpan = skeleton.findNodeByCharIndex(startOffset)!;
+
  if (direction === Direction.LEFT) {
- cursor = Math.max(0, startOffset - 1);
+ cursor = Math.max(0, startOffset - preSpan.count);
  } else {
  // -1 because the length of the string will be 1 larger than the index, and the reason for subtracting another 1 is because it ends in \n
- cursor = Math.min(dataStreamLength - 2, endOffset + 1);
+ cursor = Math.min(dataStreamLength - 2, endOffset + curSpan.count);
  }
  }
 

packages/docs/src/services/text-selection-manager.service.ts

@@ -46,7 +46,6 @@ export class TextSelectionManagerService implements IDisposable {
 
  setCurrentSelection(param: ITextSelectionManagerSearchParam) {
  this._currentSelection = param;
-
  this._refresh(param);
  }
 

packages/engine-render/src/basics/i-document-skeleton-cached.ts

@@ -153,8 +153,8 @@ export interface IDocumentSkeletonSpan {
  bBox: IDocumentSkeletonBoundingBox; // bBox: size of Span
  paddingLeft: number; // paddingLeft, adjust text align in span
  left: number; // left
- count?: number; // count, content，default 1
- content?: string; // content
+ count: number; // count, content length，default 1
+ content: string; // content
  ts?: ITextStyle; // text style
  fontStyle?: IDocumentSkeletonFontStyle; // fontStyle : ITextStyle convert to canvas font
  parent?: IDocumentSkeletonDivide;