@textbus/platform-browser 4.0.0-alpha.73 → 4.0.0-alpha.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/bundles/index.esm.js +32 -5
  2. package/bundles/index.js +32 -5
  3. package/package.json +5 -5
package/bundles/index.esm.js CHANGED
@@ -54,7 +54,7 @@ function getLayoutRectByRange(range) {
54
54
  return {
55
55
  left: rect.right,
56
56
  top: rect.top,
57
- width: rect.width,
57
+ width: range.collapsed ? 0 : rect.width,
58
58
  height: rect.height
59
59
  };
60
60
  }
@@ -74,14 +74,20 @@ function getLayoutRectByRange(range) {
74
74
  return {
75
75
  left: rect.right,
76
76
  top: rect.top,
77
- width: rect.width,
77
+ width: range.collapsed ? 0 : rect.width,
78
78
  height: rect.height
79
79
  };
80
80
  }
81
81
  }
82
82
  if (offsetNode) {
83
83
  if (offsetNode.nodeType === Node.ELEMENT_NODE && offsetNode.nodeName.toLowerCase() !== 'br') {
84
- return offsetNode.getBoundingClientRect();
84
+ const rect = offsetNode.getBoundingClientRect();
85
+ return {
86
+ left: rect.left,
87
+ top: rect.top,
88
+ width: range.collapsed ? 0 : rect.width,
89
+ height: rect.height
90
+ };
85
91
  }
86
92
  isInsertBefore = true;
87
93
  }
@@ -1053,13 +1059,34 @@ class ExperimentalCaret {
1053
1059
  rectTop = Math.floor(rectTop);
1054
1060
  const containerRect = this.editorMask.getBoundingClientRect();
1055
1061
  const top = Math.floor(rectTop - containerRect.top);
1056
- const left = Math.floor(rect.left - containerRect.left);
1062
+ const left = Math.floor(rect.left + rect.width / 2 - containerRect.left);
1063
+ let rotate = 0;
1064
+ if (nativeRange.collapsed) {
1065
+ rotate = Math.round(Math.atan2(rect.width, rect.height) * 180 / Math.PI);
1066
+ if (rotate !== 0) {
1067
+ const hackEle = document.createElement('span');
1068
+ hackEle.style.cssText = 'display: inline-block; width: 10px; height: 10px; position: relative; contain: layout style size;';
1069
+ const pointEle = document.createElement('span');
1070
+ pointEle.style.cssText = 'position: absolute; left: 0; top: 0; width:0;height:0';
1071
+ hackEle.append(pointEle);
1072
+ node.append(hackEle);
1073
+ const t1 = pointEle.getBoundingClientRect().top;
1074
+ pointEle.style.right = '0';
1075
+ pointEle.style.left = '';
1076
+ const t2 = pointEle.getBoundingClientRect().top;
1077
+ if (t2 < t1) {
1078
+ rotate = -rotate;
1079
+ }
1080
+ hackEle.remove();
1081
+ }
1082
+ }
1057
1083
  Object.assign(this.elementRef.style, {
1058
1084
  left: left + 'px',
1059
1085
  top: top + 'px',
1060
1086
  height: boxHeight + 'px',
1061
1087
  lineHeight: boxHeight + 'px',
1062
- fontSize
1088
+ fontSize,
1089
+ transform: `rotate(${rotate}deg)`,
1063
1090
  });
1064
1091
  this.caret.style.backgroundColor = color;
1065
1092
  this.styleChangeEvent.next({
package/bundles/index.js CHANGED
@@ -56,7 +56,7 @@ function getLayoutRectByRange(range) {
56
56
  return {
57
57
  left: rect.right,
58
58
  top: rect.top,
59
- width: rect.width,
59
+ width: range.collapsed ? 0 : rect.width,
60
60
  height: rect.height
61
61
  };
62
62
  }
@@ -76,14 +76,20 @@ function getLayoutRectByRange(range) {
76
76
  return {
77
77
  left: rect.right,
78
78
  top: rect.top,
79
- width: rect.width,
79
+ width: range.collapsed ? 0 : rect.width,
80
80
  height: rect.height
81
81
  };
82
82
  }
83
83
  }
84
84
  if (offsetNode) {
85
85
  if (offsetNode.nodeType === Node.ELEMENT_NODE && offsetNode.nodeName.toLowerCase() !== 'br') {
86
- return offsetNode.getBoundingClientRect();
86
+ const rect = offsetNode.getBoundingClientRect();
87
+ return {
88
+ left: rect.left,
89
+ top: rect.top,
90
+ width: range.collapsed ? 0 : rect.width,
91
+ height: rect.height
92
+ };
87
93
  }
88
94
  isInsertBefore = true;
89
95
  }
@@ -1055,13 +1061,34 @@ class ExperimentalCaret {
1055
1061
  rectTop = Math.floor(rectTop);
1056
1062
  const containerRect = this.editorMask.getBoundingClientRect();
1057
1063
  const top = Math.floor(rectTop - containerRect.top);
1058
- const left = Math.floor(rect.left - containerRect.left);
1064
+ const left = Math.floor(rect.left + rect.width / 2 - containerRect.left);
1065
+ let rotate = 0;
1066
+ if (nativeRange.collapsed) {
1067
+ rotate = Math.round(Math.atan2(rect.width, rect.height) * 180 / Math.PI);
1068
+ if (rotate !== 0) {
1069
+ const hackEle = document.createElement('span');
1070
+ hackEle.style.cssText = 'display: inline-block; width: 10px; height: 10px; position: relative; contain: layout style size;';
1071
+ const pointEle = document.createElement('span');
1072
+ pointEle.style.cssText = 'position: absolute; left: 0; top: 0; width:0;height:0';
1073
+ hackEle.append(pointEle);
1074
+ node.append(hackEle);
1075
+ const t1 = pointEle.getBoundingClientRect().top;
1076
+ pointEle.style.right = '0';
1077
+ pointEle.style.left = '';
1078
+ const t2 = pointEle.getBoundingClientRect().top;
1079
+ if (t2 < t1) {
1080
+ rotate = -rotate;
1081
+ }
1082
+ hackEle.remove();
1083
+ }
1084
+ }
1059
1085
  Object.assign(this.elementRef.style, {
1060
1086
  left: left + 'px',
1061
1087
  top: top + 'px',
1062
1088
  height: boxHeight + 'px',
1063
1089
  lineHeight: boxHeight + 'px',
1064
- fontSize
1090
+ fontSize,
1091
+ transform: `rotate(${rotate}deg)`,
1065
1092
  });
1066
1093
  this.caret.style.backgroundColor = color;
1067
1094
  this.styleChangeEvent.next({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@textbus/platform-browser",
3
- "version": "4.0.0-alpha.73",
3
+ "version": "4.0.0-alpha.74",
4
4
  "description": "Textbus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
5
5
  "main": "./bundles/index.js",
6
6
  "module": "./bundles/index.esm.js",
@@ -26,9 +26,9 @@
26
26
  ],
27
27
  "dependencies": {
28
28
  "@tanbo/stream": "^1.2.5",
29
- "@textbus/collaborate": "^4.0.0-alpha.73",
30
- "@textbus/core": "^4.0.0-alpha.73",
31
- "@viewfly/core": "^1.0.0-alpha.21"
29
+ "@textbus/collaborate": "^4.0.0-alpha.74",
30
+ "@textbus/core": "^4.0.0-alpha.74",
31
+ "@viewfly/core": "^1.0.0-alpha.22"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@rollup/plugin-commonjs": "^23.0.2",
@@ -48,5 +48,5 @@
48
48
  "bugs": {
49
49
  "url": "https://github.com/textbus/textbus.git/issues"
50
50
  },
51
- "gitHead": "cf4fd289b73bc777124a32fe42bb58eba05a34f1"
51
+ "gitHead": "fcd0c2f0e5111a1019cdd92144cde932fb4f5acd"
52
52
  }