@atlaskit/editor-plugin-caption 15.0.1 → 16.0.0
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 +13 -0
- package/dist/cjs/nodeviews/captionNodeView.js +114 -0
- package/dist/cjs/pm-plugins/main.js +3 -1
- package/dist/es2019/nodeviews/captionNodeView.js +92 -0
- package/dist/es2019/pm-plugins/main.js +3 -1
- package/dist/esm/nodeviews/captionNodeView.js +107 -0
- package/dist/esm/pm-plugins/main.js +3 -1
- package/dist/types/nodeviews/captionNodeView.d.ts +31 -0
- package/package.json +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-caption
|
|
2
2
|
|
|
3
|
+
## 16.0.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 15.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`ea6e7dbe325bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea6e7dbe325bb) -
|
|
14
|
+
Gate vanillaCaptionNodeView styles behind `platform_editor_vanilla_node_views_phase1` experiment
|
|
15
|
+
|
|
3
16
|
## 15.0.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.CaptionNodeView = void 0;
|
|
8
|
+
exports.captionNodeView = captionNodeView;
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
/**
|
|
12
|
+
* Builds the static DOM structure for the caption node view.
|
|
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.
|
|
18
|
+
*/
|
|
19
|
+
function createCaptionDOM(node) {
|
|
20
|
+
var figcaption = document.createElement('figcaption');
|
|
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
|
+
};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Vanilla (React-free) implementation of CaptionNodeView.
|
|
42
|
+
*
|
|
43
|
+
* Replaces SelectionBasedNodeView + CaptionComponent React render.
|
|
44
|
+
* The caption node is a figcaption containing an editable div (contentDOM).
|
|
45
|
+
* When not selected and empty, shows an inline "Add a caption" placeholder.
|
|
46
|
+
*/
|
|
47
|
+
var CaptionNodeView = exports.CaptionNodeView = /*#__PURE__*/function () {
|
|
48
|
+
function CaptionNodeView(node, view, getPos, pluginInjectionApi, intl) {
|
|
49
|
+
(0, _classCallCheck2.default)(this, CaptionNodeView);
|
|
50
|
+
this.node = node;
|
|
51
|
+
this.pluginInjectionApi = pluginInjectionApi;
|
|
52
|
+
var _createCaptionDOM = createCaptionDOM(node),
|
|
53
|
+
dom = _createCaptionDOM.dom,
|
|
54
|
+
contentDOM = _createCaptionDOM.contentDOM;
|
|
55
|
+
this.dom = dom;
|
|
56
|
+
this.contentDOM = contentDOM;
|
|
57
|
+
this.syncContentEditable();
|
|
58
|
+
this.setupEditorDisabledListener();
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// ── ProseMirror NodeView interface ──────────────────────────────────────
|
|
62
|
+
return (0, _createClass2.default)(CaptionNodeView, [{
|
|
63
|
+
key: "update",
|
|
64
|
+
value: function update(node, _decorations, _innerDecorations) {
|
|
65
|
+
if (node.type !== this.node.type) {
|
|
66
|
+
return false;
|
|
67
|
+
}
|
|
68
|
+
this.node = node;
|
|
69
|
+
return true;
|
|
70
|
+
}
|
|
71
|
+
}, {
|
|
72
|
+
key: "ignoreMutation",
|
|
73
|
+
value: function ignoreMutation(mutation) {
|
|
74
|
+
return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
|
|
75
|
+
}
|
|
76
|
+
}, {
|
|
77
|
+
key: "destroy",
|
|
78
|
+
value: function destroy() {
|
|
79
|
+
if (this.cleanupEditorDisabledListener) {
|
|
80
|
+
this.cleanupEditorDisabledListener();
|
|
81
|
+
this.cleanupEditorDisabledListener = undefined;
|
|
82
|
+
}
|
|
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
|
+
});
|
|
106
|
+
}
|
|
107
|
+
}]);
|
|
108
|
+
}();
|
|
109
|
+
/** Factory function for ProseMirror node view registration. */
|
|
110
|
+
function captionNodeView(pluginInjectionApi, intl) {
|
|
111
|
+
return function (node, view, getPos) {
|
|
112
|
+
return new CaptionNodeView(node, view, getPos, pluginInjectionApi, intl);
|
|
113
|
+
};
|
|
114
|
+
}
|
|
@@ -8,7 +8,9 @@ exports.default = void 0;
|
|
|
8
8
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
9
9
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
10
10
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
11
|
+
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
11
12
|
var _nodeviews = _interopRequireDefault(require("../nodeviews"));
|
|
13
|
+
var _captionNodeView = require("../nodeviews/captionNodeView");
|
|
12
14
|
var _pluginKey = require("./plugin-key");
|
|
13
15
|
var fireAnalytics = function fireAnalytics(tr, action, analyticsApi) {
|
|
14
16
|
analyticsApi === null || analyticsApi === void 0 || analyticsApi.attachAnalyticsEvent({
|
|
@@ -50,7 +52,7 @@ var _default = exports.default = function _default(portalProviderAPI, eventDispa
|
|
|
50
52
|
key: _pluginKey.pluginKey,
|
|
51
53
|
props: {
|
|
52
54
|
nodeViews: {
|
|
53
|
-
caption: (0, _nodeviews.default)(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
55
|
+
caption: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_vanilla_node_views_phase1') ? (0, _captionNodeView.captionNodeView)(pluginInjectionApi, intl) : (0, _nodeviews.default)(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
54
56
|
}
|
|
55
57
|
}
|
|
56
58
|
});
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Builds the static DOM structure for the caption node view.
|
|
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.
|
|
8
|
+
*/
|
|
9
|
+
function createCaptionDOM(node) {
|
|
10
|
+
const figcaption = document.createElement('figcaption');
|
|
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
|
+
};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Vanilla (React-free) implementation of CaptionNodeView.
|
|
32
|
+
*
|
|
33
|
+
* Replaces SelectionBasedNodeView + CaptionComponent React render.
|
|
34
|
+
* The caption node is a figcaption containing an editable div (contentDOM).
|
|
35
|
+
* When not selected and empty, shows an inline "Add a caption" placeholder.
|
|
36
|
+
*/
|
|
37
|
+
export class CaptionNodeView {
|
|
38
|
+
constructor(node, view, getPos, pluginInjectionApi, intl) {
|
|
39
|
+
this.node = node;
|
|
40
|
+
this.pluginInjectionApi = pluginInjectionApi;
|
|
41
|
+
const {
|
|
42
|
+
dom,
|
|
43
|
+
contentDOM
|
|
44
|
+
} = createCaptionDOM(node);
|
|
45
|
+
this.dom = dom;
|
|
46
|
+
this.contentDOM = contentDOM;
|
|
47
|
+
this.syncContentEditable();
|
|
48
|
+
this.setupEditorDisabledListener();
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// ── ProseMirror NodeView interface ──────────────────────────────────────
|
|
52
|
+
|
|
53
|
+
update(node, _decorations, _innerDecorations) {
|
|
54
|
+
if (node.type !== this.node.type) {
|
|
55
|
+
return false;
|
|
56
|
+
}
|
|
57
|
+
this.node = node;
|
|
58
|
+
return true;
|
|
59
|
+
}
|
|
60
|
+
ignoreMutation(mutation) {
|
|
61
|
+
return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
|
|
62
|
+
}
|
|
63
|
+
destroy() {
|
|
64
|
+
if (this.cleanupEditorDisabledListener) {
|
|
65
|
+
this.cleanupEditorDisabledListener();
|
|
66
|
+
this.cleanupEditorDisabledListener = undefined;
|
|
67
|
+
}
|
|
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
|
+
});
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/** Factory function for ProseMirror node view registration. */
|
|
88
|
+
export function captionNodeView(pluginInjectionApi, intl) {
|
|
89
|
+
return (node, view, getPos) => {
|
|
90
|
+
return new CaptionNodeView(node, view, getPos, pluginInjectionApi, intl);
|
|
91
|
+
};
|
|
92
|
+
}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
4
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
4
5
|
import captionNodeView from '../nodeviews';
|
|
6
|
+
import { captionNodeView as captionNodeViewVanilla } from '../nodeviews/captionNodeView';
|
|
5
7
|
import { pluginKey } from './plugin-key';
|
|
6
8
|
const fireAnalytics = (tr, action, analyticsApi) => {
|
|
7
9
|
analyticsApi === null || analyticsApi === void 0 ? void 0 : analyticsApi.attachAnalyticsEvent({
|
|
@@ -43,7 +45,7 @@ export default ((portalProviderAPI, eventDispatcher, providerFactory, dispatch,
|
|
|
43
45
|
key: pluginKey,
|
|
44
46
|
props: {
|
|
45
47
|
nodeViews: {
|
|
46
|
-
caption: captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
48
|
+
caption: isExperimentEnabled('platform_editor_vanilla_node_views_phase1') ? captionNodeViewVanilla(pluginInjectionApi, intl) : captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
47
49
|
}
|
|
48
50
|
}
|
|
49
51
|
});
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
/**
|
|
4
|
+
* Builds the static DOM structure for the caption node view.
|
|
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.
|
|
10
|
+
*/
|
|
11
|
+
function createCaptionDOM(node) {
|
|
12
|
+
var figcaption = document.createElement('figcaption');
|
|
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
|
+
};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Vanilla (React-free) implementation of CaptionNodeView.
|
|
34
|
+
*
|
|
35
|
+
* Replaces SelectionBasedNodeView + CaptionComponent React render.
|
|
36
|
+
* The caption node is a figcaption containing an editable div (contentDOM).
|
|
37
|
+
* When not selected and empty, shows an inline "Add a caption" placeholder.
|
|
38
|
+
*/
|
|
39
|
+
export var CaptionNodeView = /*#__PURE__*/function () {
|
|
40
|
+
function CaptionNodeView(node, view, getPos, pluginInjectionApi, intl) {
|
|
41
|
+
_classCallCheck(this, CaptionNodeView);
|
|
42
|
+
this.node = node;
|
|
43
|
+
this.pluginInjectionApi = pluginInjectionApi;
|
|
44
|
+
var _createCaptionDOM = createCaptionDOM(node),
|
|
45
|
+
dom = _createCaptionDOM.dom,
|
|
46
|
+
contentDOM = _createCaptionDOM.contentDOM;
|
|
47
|
+
this.dom = dom;
|
|
48
|
+
this.contentDOM = contentDOM;
|
|
49
|
+
this.syncContentEditable();
|
|
50
|
+
this.setupEditorDisabledListener();
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// ── ProseMirror NodeView interface ──────────────────────────────────────
|
|
54
|
+
return _createClass(CaptionNodeView, [{
|
|
55
|
+
key: "update",
|
|
56
|
+
value: function update(node, _decorations, _innerDecorations) {
|
|
57
|
+
if (node.type !== this.node.type) {
|
|
58
|
+
return false;
|
|
59
|
+
}
|
|
60
|
+
this.node = node;
|
|
61
|
+
return true;
|
|
62
|
+
}
|
|
63
|
+
}, {
|
|
64
|
+
key: "ignoreMutation",
|
|
65
|
+
value: function ignoreMutation(mutation) {
|
|
66
|
+
return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
|
|
67
|
+
}
|
|
68
|
+
}, {
|
|
69
|
+
key: "destroy",
|
|
70
|
+
value: function destroy() {
|
|
71
|
+
if (this.cleanupEditorDisabledListener) {
|
|
72
|
+
this.cleanupEditorDisabledListener();
|
|
73
|
+
this.cleanupEditorDisabledListener = undefined;
|
|
74
|
+
}
|
|
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
|
+
});
|
|
98
|
+
}
|
|
99
|
+
}]);
|
|
100
|
+
}();
|
|
101
|
+
|
|
102
|
+
/** Factory function for ProseMirror node view registration. */
|
|
103
|
+
export function captionNodeView(pluginInjectionApi, intl) {
|
|
104
|
+
return function (node, view, getPos) {
|
|
105
|
+
return new CaptionNodeView(node, view, getPos, pluginInjectionApi, intl);
|
|
106
|
+
};
|
|
107
|
+
}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
4
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
4
5
|
import captionNodeView from '../nodeviews';
|
|
6
|
+
import { captionNodeView as captionNodeViewVanilla } from '../nodeviews/captionNodeView';
|
|
5
7
|
import { pluginKey } from './plugin-key';
|
|
6
8
|
var fireAnalytics = function fireAnalytics(tr, action, analyticsApi) {
|
|
7
9
|
analyticsApi === null || analyticsApi === void 0 || analyticsApi.attachAnalyticsEvent({
|
|
@@ -43,7 +45,7 @@ export default (function (portalProviderAPI, eventDispatcher, providerFactory, d
|
|
|
43
45
|
key: pluginKey,
|
|
44
46
|
props: {
|
|
45
47
|
nodeViews: {
|
|
46
|
-
caption: captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
48
|
+
caption: isExperimentEnabled('platform_editor_vanilla_node_views_phase1') ? captionNodeViewVanilla(pluginInjectionApi, intl) : captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi, intl)
|
|
47
49
|
}
|
|
48
50
|
}
|
|
49
51
|
});
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl';
|
|
2
|
+
import type { ExtractInjectionAPI, getPosHandlerNode } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { CaptionPlugin } from '../captionPluginType';
|
|
6
|
+
/**
|
|
7
|
+
* Vanilla (React-free) implementation of CaptionNodeView.
|
|
8
|
+
*
|
|
9
|
+
* Replaces SelectionBasedNodeView + CaptionComponent React render.
|
|
10
|
+
* The caption node is a figcaption containing an editable div (contentDOM).
|
|
11
|
+
* When not selected and empty, shows an inline "Add a caption" placeholder.
|
|
12
|
+
*/
|
|
13
|
+
export declare class CaptionNodeView implements NodeView {
|
|
14
|
+
dom: HTMLElement;
|
|
15
|
+
contentDOM: HTMLElement;
|
|
16
|
+
private node;
|
|
17
|
+
private pluginInjectionApi?;
|
|
18
|
+
private cleanupEditorDisabledListener?;
|
|
19
|
+
constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, pluginInjectionApi: ExtractInjectionAPI<CaptionPlugin> | undefined, intl?: IntlShape);
|
|
20
|
+
update(node: PMNode, _decorations: readonly Decoration[], _innerDecorations?: DecorationSource): boolean;
|
|
21
|
+
ignoreMutation(mutation: MutationRecord | {
|
|
22
|
+
target: Node;
|
|
23
|
+
type: 'selection';
|
|
24
|
+
}): boolean;
|
|
25
|
+
destroy(): void;
|
|
26
|
+
private get editorDisabled();
|
|
27
|
+
private syncContentEditable;
|
|
28
|
+
private setupEditorDisabledListener;
|
|
29
|
+
}
|
|
30
|
+
/** Factory function for ProseMirror node view registration. */
|
|
31
|
+
export declare function captionNodeView(pluginInjectionApi: ExtractInjectionAPI<CaptionPlugin> | undefined, intl?: IntlShape): (node: PMNode, view: EditorView, getPos: getPosHandlerNode) => CaptionNodeView;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-caption",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "16.0.0",
|
|
4
4
|
"description": "Caption plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -19,15 +19,16 @@
|
|
|
19
19
|
"sideEffects": false,
|
|
20
20
|
"atlaskit:src": "src/index.ts",
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@atlaskit/adf-schema": "^57.
|
|
22
|
+
"@atlaskit/adf-schema": "^57.1.0",
|
|
23
23
|
"@atlaskit/browser-apis": "^1.2.0",
|
|
24
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
25
|
-
"@atlaskit/editor-plugin-editor-disabled": "^
|
|
24
|
+
"@atlaskit/editor-plugin-analytics": "^16.0.0",
|
|
25
|
+
"@atlaskit/editor-plugin-editor-disabled": "^16.0.0",
|
|
26
26
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
27
|
+
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
27
28
|
"@babel/runtime": "^7.0.0"
|
|
28
29
|
},
|
|
29
30
|
"peerDependencies": {
|
|
30
|
-
"@atlaskit/editor-common": "^
|
|
31
|
+
"@atlaskit/editor-common": "^120.0.0",
|
|
31
32
|
"react": "^18.2.0 || ^19.2.0",
|
|
32
33
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
33
34
|
},
|