@atlaskit/editor-plugin-caption 16.0.0 → 16.0.1
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.
- package/CHANGELOG.md +23 -0
- package/dist/cjs/nodeviews/captionNodeView.js +27 -67
- package/dist/cjs/pm-plugins/main.js +1 -1
- package/dist/es2019/nodeviews/captionNodeView.js +25 -59
- package/dist/es2019/pm-plugins/main.js +1 -1
- package/dist/esm/nodeviews/captionNodeView.js +27 -67
- package/dist/esm/pm-plugins/main.js +1 -1
- package/dist/types/nodeviews/captionNodeView.d.ts +8 -17
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-caption
|
|
2
2
|
|
|
3
|
+
## 16.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`e6d39cd334b84`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e6d39cd334b84) -
|
|
8
|
+
EDITOR-8639 clean up native caption nodeview
|
|
9
|
+
|
|
10
|
+
Simplifies the vanilla (React-free) caption node view to own its DOM structure and nothing else.
|
|
11
|
+
Behind the `platform_editor_vanilla_node_views_phase1` experiment;
|
|
12
|
+
|
|
13
|
+
**Removed**
|
|
14
|
+
- `contenteditable` management — the node view no longer sets `contenteditable` on its content
|
|
15
|
+
element. Editability is now inherited from the ProseMirror root, so a nested `contenteditable`
|
|
16
|
+
can no longer override an ancestor that has disabled editing. Behaviour change: because
|
|
17
|
+
`mediaSingle` sets `contentEditable="false"` on its wrapper in view mode, captions are now
|
|
18
|
+
correctly read-only there, where the React node view left them editable.
|
|
19
|
+
- The `editorDisabled` shared-state subscription (and its `destroy()` cleanup) that existed only
|
|
20
|
+
to keep the above attribute in sync.
|
|
21
|
+
- Unused constructor arguments (`view`, `getPos`, plugin injection API, `intl`) — the node view no
|
|
22
|
+
longer needs editor state or i18n.
|
|
23
|
+
|
|
24
|
+
- Updated dependencies
|
|
25
|
+
|
|
3
26
|
## 16.0.0
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
|
@@ -8,57 +8,45 @@ exports.CaptionNodeView = void 0;
|
|
|
8
8
|
exports.captionNodeView = captionNodeView;
|
|
9
9
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
10
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
|
+
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
13
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
15
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* figcaption[data-caption][data-media-caption][data-testid="media-caption"]
|
|
15
|
-
* div.captionView-content-wrap ← contentDOM (PM editable region)
|
|
16
|
-
*
|
|
17
|
-
* Styles are applied via CSS selectors in EditorContentContainer — no inline styles.
|
|
16
|
+
* DOM spec for the caption node view.
|
|
18
17
|
*/
|
|
18
|
+
function toDOM(node) {
|
|
19
|
+
return ['figcaption', _objectSpread({
|
|
20
|
+
'data-caption': 'true',
|
|
21
|
+
'data-media-caption': 'true',
|
|
22
|
+
'data-testid': 'media-caption'
|
|
23
|
+
}, node.attrs.localId ? {
|
|
24
|
+
'data-local-id': node.attrs.localId
|
|
25
|
+
} : {}), ['div', {
|
|
26
|
+
class: 'captionView-content-wrap'
|
|
27
|
+
}, 0]];
|
|
28
|
+
}
|
|
19
29
|
function createCaptionDOM(node) {
|
|
20
|
-
|
|
21
|
-
figcaption.setAttribute('data-caption', 'true');
|
|
22
|
-
figcaption.setAttribute('data-media-caption', 'true');
|
|
23
|
-
figcaption.setAttribute('data-testid', 'media-caption');
|
|
24
|
-
if (node.attrs.localId) {
|
|
25
|
-
figcaption.setAttribute('localid', node.attrs.localId);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// contentDOM — PM writes the editable content here.
|
|
29
|
-
// Must be a direct child of dom (figcaption) so ProseMirror's domAtPos /
|
|
30
|
-
// vertical cursor movement correctly resolves positions inside the caption.
|
|
31
|
-
var contentWrapper = document.createElement('div');
|
|
32
|
-
contentWrapper.className = 'captionView-content-wrap';
|
|
33
|
-
figcaption.appendChild(contentWrapper);
|
|
34
|
-
return {
|
|
35
|
-
dom: figcaption,
|
|
36
|
-
contentDOM: contentWrapper
|
|
37
|
-
};
|
|
30
|
+
return _model.DOMSerializer.renderSpec(document, toDOM(node));
|
|
38
31
|
}
|
|
39
32
|
|
|
40
33
|
/**
|
|
41
34
|
* Vanilla (React-free) implementation of CaptionNodeView.
|
|
42
35
|
*
|
|
43
|
-
* Replaces SelectionBasedNodeView + CaptionComponent React render.
|
|
44
|
-
*
|
|
45
|
-
*
|
|
36
|
+
* Replaces SelectionBasedNodeView + CaptionComponent React render. The node view owns the DOM
|
|
37
|
+
* shape and nothing else: editability is inherited from the ProseMirror root rather than being
|
|
38
|
+
* set here, so disabling the editor cannot be overridden by a stale nested `contenteditable`.
|
|
46
39
|
*/
|
|
47
40
|
var CaptionNodeView = exports.CaptionNodeView = /*#__PURE__*/function () {
|
|
48
|
-
function CaptionNodeView(node
|
|
41
|
+
function CaptionNodeView(node) {
|
|
49
42
|
(0, _classCallCheck2.default)(this, CaptionNodeView);
|
|
50
43
|
this.node = node;
|
|
51
|
-
this.pluginInjectionApi = pluginInjectionApi;
|
|
52
44
|
var _createCaptionDOM = createCaptionDOM(node),
|
|
53
45
|
dom = _createCaptionDOM.dom,
|
|
54
46
|
contentDOM = _createCaptionDOM.contentDOM;
|
|
55
47
|
this.dom = dom;
|
|
56
48
|
this.contentDOM = contentDOM;
|
|
57
|
-
this.syncContentEditable();
|
|
58
|
-
this.setupEditorDisabledListener();
|
|
59
49
|
}
|
|
60
|
-
|
|
61
|
-
// ── ProseMirror NodeView interface ──────────────────────────────────────
|
|
62
50
|
return (0, _createClass2.default)(CaptionNodeView, [{
|
|
63
51
|
key: "update",
|
|
64
52
|
value: function update(node, _decorations, _innerDecorations) {
|
|
@@ -71,44 +59,16 @@ var CaptionNodeView = exports.CaptionNodeView = /*#__PURE__*/function () {
|
|
|
71
59
|
}, {
|
|
72
60
|
key: "ignoreMutation",
|
|
73
61
|
value: function ignoreMutation(mutation) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}, {
|
|
77
|
-
key: "destroy",
|
|
78
|
-
value: function destroy() {
|
|
79
|
-
if (this.cleanupEditorDisabledListener) {
|
|
80
|
-
this.cleanupEditorDisabledListener();
|
|
81
|
-
this.cleanupEditorDisabledListener = undefined;
|
|
62
|
+
if (!this.contentDOM) {
|
|
63
|
+
return true;
|
|
82
64
|
}
|
|
83
|
-
|
|
84
|
-
}, {
|
|
85
|
-
key: "editorDisabled",
|
|
86
|
-
get: function get() {
|
|
87
|
-
var _this$pluginInjection, _this$pluginInjection2;
|
|
88
|
-
return (_this$pluginInjection = (_this$pluginInjection2 = this.pluginInjectionApi) === null || _this$pluginInjection2 === void 0 || (_this$pluginInjection2 = _this$pluginInjection2.editorDisabled) === null || _this$pluginInjection2 === void 0 || (_this$pluginInjection2 = _this$pluginInjection2.sharedState.currentState()) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.editorDisabled) !== null && _this$pluginInjection !== void 0 ? _this$pluginInjection : false;
|
|
89
|
-
}
|
|
90
|
-
}, {
|
|
91
|
-
key: "syncContentEditable",
|
|
92
|
-
value: function syncContentEditable() {
|
|
93
|
-
this.contentDOM.setAttribute('contenteditable', this.editorDisabled ? 'false' : 'true');
|
|
94
|
-
}
|
|
95
|
-
}, {
|
|
96
|
-
key: "setupEditorDisabledListener",
|
|
97
|
-
value: function setupEditorDisabledListener() {
|
|
98
|
-
var _this$pluginInjection3,
|
|
99
|
-
_this = this;
|
|
100
|
-
if (!((_this$pluginInjection3 = this.pluginInjectionApi) !== null && _this$pluginInjection3 !== void 0 && _this$pluginInjection3.editorDisabled) || this.cleanupEditorDisabledListener) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
this.cleanupEditorDisabledListener = this.pluginInjectionApi.editorDisabled.sharedState.onChange(function () {
|
|
104
|
-
_this.syncContentEditable();
|
|
105
|
-
});
|
|
65
|
+
return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
|
|
106
66
|
}
|
|
107
67
|
}]);
|
|
108
68
|
}();
|
|
109
69
|
/** Factory function for ProseMirror node view registration. */
|
|
110
|
-
function captionNodeView(
|
|
111
|
-
return function (node
|
|
112
|
-
return new CaptionNodeView(node
|
|
70
|
+
function captionNodeView() {
|
|
71
|
+
return function (node) {
|
|
72
|
+
return new CaptionNodeView(node);
|
|
113
73
|
};
|
|
114
74
|
}
|
|
@@ -52,7 +52,7 @@ var _default = exports.default = function _default(portalProviderAPI, eventDispa
|
|
|
52
52
|
key: _pluginKey.pluginKey,
|
|
53
53
|
props: {
|
|
54
54
|
nodeViews: {
|
|
55
|
-
caption: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_vanilla_node_views_phase1') ? (0, _captionNodeView.captionNodeView)(
|
|
55
|
+
caption: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_vanilla_node_views_phase1') ? (0, _captionNodeView.captionNodeView)() : (0, _nodeviews.default)(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
});
|
|
@@ -1,55 +1,40 @@
|
|
|
1
|
+
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
1
2
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
* figcaption[data-caption][data-media-caption][data-testid="media-caption"]
|
|
5
|
-
* div.captionView-content-wrap ← contentDOM (PM editable region)
|
|
6
|
-
*
|
|
7
|
-
* Styles are applied via CSS selectors in EditorContentContainer — no inline styles.
|
|
3
|
+
* DOM spec for the caption node view.
|
|
8
4
|
*/
|
|
5
|
+
function toDOM(node) {
|
|
6
|
+
return ['figcaption', {
|
|
7
|
+
'data-caption': 'true',
|
|
8
|
+
'data-media-caption': 'true',
|
|
9
|
+
'data-testid': 'media-caption',
|
|
10
|
+
...(node.attrs.localId ? {
|
|
11
|
+
'data-local-id': node.attrs.localId
|
|
12
|
+
} : {})
|
|
13
|
+
}, ['div', {
|
|
14
|
+
class: 'captionView-content-wrap'
|
|
15
|
+
}, 0]];
|
|
16
|
+
}
|
|
9
17
|
function createCaptionDOM(node) {
|
|
10
|
-
|
|
11
|
-
figcaption.setAttribute('data-caption', 'true');
|
|
12
|
-
figcaption.setAttribute('data-media-caption', 'true');
|
|
13
|
-
figcaption.setAttribute('data-testid', 'media-caption');
|
|
14
|
-
if (node.attrs.localId) {
|
|
15
|
-
figcaption.setAttribute('localid', node.attrs.localId);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
// contentDOM — PM writes the editable content here.
|
|
19
|
-
// Must be a direct child of dom (figcaption) so ProseMirror's domAtPos /
|
|
20
|
-
// vertical cursor movement correctly resolves positions inside the caption.
|
|
21
|
-
const contentWrapper = document.createElement('div');
|
|
22
|
-
contentWrapper.className = 'captionView-content-wrap';
|
|
23
|
-
figcaption.appendChild(contentWrapper);
|
|
24
|
-
return {
|
|
25
|
-
dom: figcaption,
|
|
26
|
-
contentDOM: contentWrapper
|
|
27
|
-
};
|
|
18
|
+
return DOMSerializer.renderSpec(document, toDOM(node));
|
|
28
19
|
}
|
|
29
20
|
|
|
30
21
|
/**
|
|
31
22
|
* Vanilla (React-free) implementation of CaptionNodeView.
|
|
32
23
|
*
|
|
33
|
-
* Replaces SelectionBasedNodeView + CaptionComponent React render.
|
|
34
|
-
*
|
|
35
|
-
*
|
|
24
|
+
* Replaces SelectionBasedNodeView + CaptionComponent React render. The node view owns the DOM
|
|
25
|
+
* shape and nothing else: editability is inherited from the ProseMirror root rather than being
|
|
26
|
+
* set here, so disabling the editor cannot be overridden by a stale nested `contenteditable`.
|
|
36
27
|
*/
|
|
37
28
|
export class CaptionNodeView {
|
|
38
|
-
constructor(node
|
|
29
|
+
constructor(node) {
|
|
39
30
|
this.node = node;
|
|
40
|
-
this.pluginInjectionApi = pluginInjectionApi;
|
|
41
31
|
const {
|
|
42
32
|
dom,
|
|
43
33
|
contentDOM
|
|
44
34
|
} = createCaptionDOM(node);
|
|
45
35
|
this.dom = dom;
|
|
46
36
|
this.contentDOM = contentDOM;
|
|
47
|
-
this.syncContentEditable();
|
|
48
|
-
this.setupEditorDisabledListener();
|
|
49
37
|
}
|
|
50
|
-
|
|
51
|
-
// ── ProseMirror NodeView interface ──────────────────────────────────────
|
|
52
|
-
|
|
53
38
|
update(node, _decorations, _innerDecorations) {
|
|
54
39
|
if (node.type !== this.node.type) {
|
|
55
40
|
return false;
|
|
@@ -58,35 +43,16 @@ export class CaptionNodeView {
|
|
|
58
43
|
return true;
|
|
59
44
|
}
|
|
60
45
|
ignoreMutation(mutation) {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
destroy() {
|
|
64
|
-
if (this.cleanupEditorDisabledListener) {
|
|
65
|
-
this.cleanupEditorDisabledListener();
|
|
66
|
-
this.cleanupEditorDisabledListener = undefined;
|
|
46
|
+
if (!this.contentDOM) {
|
|
47
|
+
return true;
|
|
67
48
|
}
|
|
68
|
-
|
|
69
|
-
get editorDisabled() {
|
|
70
|
-
var _this$pluginInjection, _this$pluginInjection2, _this$pluginInjection3, _this$pluginInjection4;
|
|
71
|
-
return (_this$pluginInjection = (_this$pluginInjection2 = this.pluginInjectionApi) === null || _this$pluginInjection2 === void 0 ? void 0 : (_this$pluginInjection3 = _this$pluginInjection2.editorDisabled) === null || _this$pluginInjection3 === void 0 ? void 0 : (_this$pluginInjection4 = _this$pluginInjection3.sharedState.currentState()) === null || _this$pluginInjection4 === void 0 ? void 0 : _this$pluginInjection4.editorDisabled) !== null && _this$pluginInjection !== void 0 ? _this$pluginInjection : false;
|
|
72
|
-
}
|
|
73
|
-
syncContentEditable() {
|
|
74
|
-
this.contentDOM.setAttribute('contenteditable', this.editorDisabled ? 'false' : 'true');
|
|
75
|
-
}
|
|
76
|
-
setupEditorDisabledListener() {
|
|
77
|
-
var _this$pluginInjection5;
|
|
78
|
-
if (!((_this$pluginInjection5 = this.pluginInjectionApi) !== null && _this$pluginInjection5 !== void 0 && _this$pluginInjection5.editorDisabled) || this.cleanupEditorDisabledListener) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
this.cleanupEditorDisabledListener = this.pluginInjectionApi.editorDisabled.sharedState.onChange(() => {
|
|
82
|
-
this.syncContentEditable();
|
|
83
|
-
});
|
|
49
|
+
return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
|
|
84
50
|
}
|
|
85
51
|
}
|
|
86
52
|
|
|
87
53
|
/** Factory function for ProseMirror node view registration. */
|
|
88
|
-
export function captionNodeView(
|
|
89
|
-
return
|
|
90
|
-
return new CaptionNodeView(node
|
|
54
|
+
export function captionNodeView() {
|
|
55
|
+
return node => {
|
|
56
|
+
return new CaptionNodeView(node);
|
|
91
57
|
};
|
|
92
58
|
}
|
|
@@ -45,7 +45,7 @@ export default ((portalProviderAPI, eventDispatcher, providerFactory, dispatch,
|
|
|
45
45
|
key: pluginKey,
|
|
46
46
|
props: {
|
|
47
47
|
nodeViews: {
|
|
48
|
-
caption: isExperimentEnabled('platform_editor_vanilla_node_views_phase1') ? captionNodeViewVanilla(
|
|
48
|
+
caption: isExperimentEnabled('platform_editor_vanilla_node_views_phase1') ? captionNodeViewVanilla() : captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
});
|
|
@@ -1,56 +1,44 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
3
7
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* figcaption[data-caption][data-media-caption][data-testid="media-caption"]
|
|
7
|
-
* div.captionView-content-wrap ← contentDOM (PM editable region)
|
|
8
|
-
*
|
|
9
|
-
* Styles are applied via CSS selectors in EditorContentContainer — no inline styles.
|
|
8
|
+
* DOM spec for the caption node view.
|
|
10
9
|
*/
|
|
10
|
+
function toDOM(node) {
|
|
11
|
+
return ['figcaption', _objectSpread({
|
|
12
|
+
'data-caption': 'true',
|
|
13
|
+
'data-media-caption': 'true',
|
|
14
|
+
'data-testid': 'media-caption'
|
|
15
|
+
}, node.attrs.localId ? {
|
|
16
|
+
'data-local-id': node.attrs.localId
|
|
17
|
+
} : {}), ['div', {
|
|
18
|
+
class: 'captionView-content-wrap'
|
|
19
|
+
}, 0]];
|
|
20
|
+
}
|
|
11
21
|
function createCaptionDOM(node) {
|
|
12
|
-
|
|
13
|
-
figcaption.setAttribute('data-caption', 'true');
|
|
14
|
-
figcaption.setAttribute('data-media-caption', 'true');
|
|
15
|
-
figcaption.setAttribute('data-testid', 'media-caption');
|
|
16
|
-
if (node.attrs.localId) {
|
|
17
|
-
figcaption.setAttribute('localid', node.attrs.localId);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
// contentDOM — PM writes the editable content here.
|
|
21
|
-
// Must be a direct child of dom (figcaption) so ProseMirror's domAtPos /
|
|
22
|
-
// vertical cursor movement correctly resolves positions inside the caption.
|
|
23
|
-
var contentWrapper = document.createElement('div');
|
|
24
|
-
contentWrapper.className = 'captionView-content-wrap';
|
|
25
|
-
figcaption.appendChild(contentWrapper);
|
|
26
|
-
return {
|
|
27
|
-
dom: figcaption,
|
|
28
|
-
contentDOM: contentWrapper
|
|
29
|
-
};
|
|
22
|
+
return DOMSerializer.renderSpec(document, toDOM(node));
|
|
30
23
|
}
|
|
31
24
|
|
|
32
25
|
/**
|
|
33
26
|
* Vanilla (React-free) implementation of CaptionNodeView.
|
|
34
27
|
*
|
|
35
|
-
* Replaces SelectionBasedNodeView + CaptionComponent React render.
|
|
36
|
-
*
|
|
37
|
-
*
|
|
28
|
+
* Replaces SelectionBasedNodeView + CaptionComponent React render. The node view owns the DOM
|
|
29
|
+
* shape and nothing else: editability is inherited from the ProseMirror root rather than being
|
|
30
|
+
* set here, so disabling the editor cannot be overridden by a stale nested `contenteditable`.
|
|
38
31
|
*/
|
|
39
32
|
export var CaptionNodeView = /*#__PURE__*/function () {
|
|
40
|
-
function CaptionNodeView(node
|
|
33
|
+
function CaptionNodeView(node) {
|
|
41
34
|
_classCallCheck(this, CaptionNodeView);
|
|
42
35
|
this.node = node;
|
|
43
|
-
this.pluginInjectionApi = pluginInjectionApi;
|
|
44
36
|
var _createCaptionDOM = createCaptionDOM(node),
|
|
45
37
|
dom = _createCaptionDOM.dom,
|
|
46
38
|
contentDOM = _createCaptionDOM.contentDOM;
|
|
47
39
|
this.dom = dom;
|
|
48
40
|
this.contentDOM = contentDOM;
|
|
49
|
-
this.syncContentEditable();
|
|
50
|
-
this.setupEditorDisabledListener();
|
|
51
41
|
}
|
|
52
|
-
|
|
53
|
-
// ── ProseMirror NodeView interface ──────────────────────────────────────
|
|
54
42
|
return _createClass(CaptionNodeView, [{
|
|
55
43
|
key: "update",
|
|
56
44
|
value: function update(node, _decorations, _innerDecorations) {
|
|
@@ -63,45 +51,17 @@ export var CaptionNodeView = /*#__PURE__*/function () {
|
|
|
63
51
|
}, {
|
|
64
52
|
key: "ignoreMutation",
|
|
65
53
|
value: function ignoreMutation(mutation) {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}, {
|
|
69
|
-
key: "destroy",
|
|
70
|
-
value: function destroy() {
|
|
71
|
-
if (this.cleanupEditorDisabledListener) {
|
|
72
|
-
this.cleanupEditorDisabledListener();
|
|
73
|
-
this.cleanupEditorDisabledListener = undefined;
|
|
54
|
+
if (!this.contentDOM) {
|
|
55
|
+
return true;
|
|
74
56
|
}
|
|
75
|
-
|
|
76
|
-
}, {
|
|
77
|
-
key: "editorDisabled",
|
|
78
|
-
get: function get() {
|
|
79
|
-
var _this$pluginInjection, _this$pluginInjection2;
|
|
80
|
-
return (_this$pluginInjection = (_this$pluginInjection2 = this.pluginInjectionApi) === null || _this$pluginInjection2 === void 0 || (_this$pluginInjection2 = _this$pluginInjection2.editorDisabled) === null || _this$pluginInjection2 === void 0 || (_this$pluginInjection2 = _this$pluginInjection2.sharedState.currentState()) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.editorDisabled) !== null && _this$pluginInjection !== void 0 ? _this$pluginInjection : false;
|
|
81
|
-
}
|
|
82
|
-
}, {
|
|
83
|
-
key: "syncContentEditable",
|
|
84
|
-
value: function syncContentEditable() {
|
|
85
|
-
this.contentDOM.setAttribute('contenteditable', this.editorDisabled ? 'false' : 'true');
|
|
86
|
-
}
|
|
87
|
-
}, {
|
|
88
|
-
key: "setupEditorDisabledListener",
|
|
89
|
-
value: function setupEditorDisabledListener() {
|
|
90
|
-
var _this$pluginInjection3,
|
|
91
|
-
_this = this;
|
|
92
|
-
if (!((_this$pluginInjection3 = this.pluginInjectionApi) !== null && _this$pluginInjection3 !== void 0 && _this$pluginInjection3.editorDisabled) || this.cleanupEditorDisabledListener) {
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
this.cleanupEditorDisabledListener = this.pluginInjectionApi.editorDisabled.sharedState.onChange(function () {
|
|
96
|
-
_this.syncContentEditable();
|
|
97
|
-
});
|
|
57
|
+
return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
|
|
98
58
|
}
|
|
99
59
|
}]);
|
|
100
60
|
}();
|
|
101
61
|
|
|
102
62
|
/** Factory function for ProseMirror node view registration. */
|
|
103
|
-
export function captionNodeView(
|
|
104
|
-
return function (node
|
|
105
|
-
return new CaptionNodeView(node
|
|
63
|
+
export function captionNodeView() {
|
|
64
|
+
return function (node) {
|
|
65
|
+
return new CaptionNodeView(node);
|
|
106
66
|
};
|
|
107
67
|
}
|
|
@@ -45,7 +45,7 @@ export default (function (portalProviderAPI, eventDispatcher, providerFactory, d
|
|
|
45
45
|
key: pluginKey,
|
|
46
46
|
props: {
|
|
47
47
|
nodeViews: {
|
|
48
|
-
caption: isExperimentEnabled('platform_editor_vanilla_node_views_phase1') ? captionNodeViewVanilla(
|
|
48
|
+
caption: isExperimentEnabled('platform_editor_vanilla_node_views_phase1') ? captionNodeViewVanilla() : captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
});
|
|
@@ -1,31 +1,22 @@
|
|
|
1
|
-
import type { IntlShape } from 'react-intl';
|
|
2
|
-
import type { ExtractInjectionAPI, getPosHandlerNode } from '@atlaskit/editor-common/types';
|
|
3
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
-
import type { Decoration, DecorationSource,
|
|
5
|
-
import type { CaptionPlugin } from '../captionPluginType';
|
|
2
|
+
import type { Decoration, DecorationSource, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
6
3
|
/**
|
|
7
4
|
* Vanilla (React-free) implementation of CaptionNodeView.
|
|
8
5
|
*
|
|
9
|
-
* Replaces SelectionBasedNodeView + CaptionComponent React render.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
6
|
+
* Replaces SelectionBasedNodeView + CaptionComponent React render. The node view owns the DOM
|
|
7
|
+
* shape and nothing else: editability is inherited from the ProseMirror root rather than being
|
|
8
|
+
* set here, so disabling the editor cannot be overridden by a stale nested `contenteditable`.
|
|
12
9
|
*/
|
|
13
10
|
export declare class CaptionNodeView implements NodeView {
|
|
14
|
-
dom:
|
|
15
|
-
contentDOM
|
|
11
|
+
dom: Node;
|
|
12
|
+
contentDOM?: HTMLElement;
|
|
16
13
|
private node;
|
|
17
|
-
|
|
18
|
-
private cleanupEditorDisabledListener?;
|
|
19
|
-
constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, pluginInjectionApi: ExtractInjectionAPI<CaptionPlugin> | undefined, intl?: IntlShape);
|
|
14
|
+
constructor(node: PMNode);
|
|
20
15
|
update(node: PMNode, _decorations: readonly Decoration[], _innerDecorations?: DecorationSource): boolean;
|
|
21
16
|
ignoreMutation(mutation: MutationRecord | {
|
|
22
17
|
target: Node;
|
|
23
18
|
type: 'selection';
|
|
24
19
|
}): boolean;
|
|
25
|
-
destroy(): void;
|
|
26
|
-
private get editorDisabled();
|
|
27
|
-
private syncContentEditable;
|
|
28
|
-
private setupEditorDisabledListener;
|
|
29
20
|
}
|
|
30
21
|
/** Factory function for ProseMirror node view registration. */
|
|
31
|
-
export declare function captionNodeView(
|
|
22
|
+
export declare function captionNodeView(): (node: PMNode) => CaptionNodeView;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-caption",
|
|
3
|
-
"version": "16.0.
|
|
3
|
+
"version": "16.0.1",
|
|
4
4
|
"description": "Caption plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"sideEffects": false,
|
|
20
20
|
"atlaskit:src": "src/index.ts",
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@atlaskit/adf-schema": "^57.
|
|
22
|
+
"@atlaskit/adf-schema": "^57.2.0",
|
|
23
23
|
"@atlaskit/browser-apis": "^1.2.0",
|
|
24
24
|
"@atlaskit/editor-plugin-analytics": "^16.0.0",
|
|
25
25
|
"@atlaskit/editor-plugin-editor-disabled": "^16.0.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@babel/runtime": "^7.0.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@atlaskit/editor-common": "^120.
|
|
31
|
+
"@atlaskit/editor-common": "^120.3.0",
|
|
32
32
|
"react": "^18.2.0 || ^19.2.0",
|
|
33
33
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
34
34
|
},
|