@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
85 lines • 3.49 kB
JavaScript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styled from 'styled-components';
import { akBorderRadius, akGridSizeUnitless, akColorG50, akColorP50, akColorB50, akColorY50, akColorG400, akColorP400, akColorB400, akColorY400 } from '@atlaskit/util-shared-styles';
import InfoIcon from '@atlaskit/icon/glyph/editor/info';
import TipIcon from '@atlaskit/icon/glyph/editor/hint';
import NoteIcon from '@atlaskit/icon/glyph/editor/note';
import WarningIcon from '@atlaskit/icon/glyph/warning';
var panelColor = {
info: akColorB50,
note: akColorP50,
tip: akColorG50,
warning: akColorY50
};
var iconColor = {
info: akColorB400,
note: akColorP400,
tip: akColorG400,
warning: akColorY400
};
var panelIcons = {
info: InfoIcon,
tip: TipIcon,
note: NoteIcon,
warning: WarningIcon
};
// 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.div(_a, akBorderRadius, akGridSizeUnitless / 2, 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.div(_b, 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.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;
}());
export var panelNodeView = function (node, view, getPos) {
return new Panel(node, view, getPos);
};
var _a, _b, _c;
//# sourceMappingURL=panel.js.map