@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
87 lines • 3.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ReactDOM = require("react-dom");
var styled_components_1 = require("styled-components");
var util_shared_styles_1 = require("@atlaskit/util-shared-styles");
var info_1 = require("@atlaskit/icon/glyph/editor/info");
var hint_1 = require("@atlaskit/icon/glyph/editor/hint");
var note_1 = require("@atlaskit/icon/glyph/editor/note");
var warning_1 = require("@atlaskit/icon/glyph/warning");
var panelColor = {
info: util_shared_styles_1.akColorB50,
note: util_shared_styles_1.akColorP50,
tip: util_shared_styles_1.akColorG50,
warning: util_shared_styles_1.akColorY50
};
var iconColor = {
info: util_shared_styles_1.akColorB400,
note: util_shared_styles_1.akColorP400,
tip: util_shared_styles_1.akColorG400,
warning: util_shared_styles_1.akColorY400
};
var panelIcons = {
info: info_1.default,
tip: hint_1.default,
note: note_1.default,
warning: warning_1.default
};
// tslint:disable-next-line:variable-name
var Wrapper = (_a = ["\n border-radius: ", ";\n margin: ", "px 0;\n padding: ", "px;\n"], _a.raw = ["\n border-radius: ", ";\n margin: ", "px 0;\n padding: ", "px;\n"], styled_components_1.default.div(_a, util_shared_styles_1.akBorderRadius, util_shared_styles_1.akGridSizeUnitless / 2, util_shared_styles_1.akGridSizeUnitless));
// tslint:disable-next-line:variable-name
var ContentWrapper = (_b = ["\n margin: 1px 0 1px ", "px;\n"], _b.raw = ["\n margin: 1px 0 1px ", "px;\n"], styled_components_1.default.div(_b, util_shared_styles_1.akGridSizeUnitless * 4));
// tslint:disable-next-line:variable-name
var IconWrapper = (_c = ["\n height: 24px;\n width: 24px;\n position: absolute;\n"], _c.raw = ["\n height: 24px;\n width: 24px;\n position: absolute;\n"], styled_components_1.default.span(_c));
var Panel = (function () {
function Panel(node, view, getPos) {
var _this = this;
this.handleRef = function (node) {
_this.contentDOMRef = node;
};
this.panelType = node.attrs.panelType;
this.renderReactComponent();
}
Panel.prototype.renderReactComponent = function () {
var panelType = this.panelType;
this.domRef = document.createElement('div');
this.domRef.dataset.panelType = this.panelType;
// tslint:disable-next-line:variable-name
var Icon = panelIcons[panelType];
ReactDOM.render(React.createElement(Wrapper, { style: { background: panelColor[panelType] } },
React.createElement(IconWrapper, { style: { color: iconColor[panelType] } },
React.createElement(Icon, { label: "Panel " + panelType })),
React.createElement(ContentWrapper, { innerRef: this.handleRef })), this.domRef);
};
Object.defineProperty(Panel.prototype, "dom", {
get: function () {
return this.domRef;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Panel.prototype, "contentDOM", {
get: function () {
return this.contentDOMRef;
},
enumerable: true,
configurable: true
});
Panel.prototype.update = function () {
/**
* Returning false here fixes an error where the editor fails to set selection
* inside the contentDOM after a transaction. See ED-2374.
*/
return false;
};
Panel.prototype.destroy = function () {
ReactDOM.unmountComponentAtNode(this.domRef);
this.domRef = undefined;
this.contentDOMRef = undefined;
};
return Panel;
}());
exports.panelNodeView = function (node, view, getPos) {
return new Panel(node, view, getPos);
};
var _a, _b, _c;
//# sourceMappingURL=panel.js.map