@umbraco/headless-backoffice-bridge
Version:
Native javascript bridge for the Umbraco Backoffice.
170 lines • 8.51 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _TinyMceElement_template, _TinyMceElement_linkedTemplate, _TinyMceElement_scope;
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { getService } from '../../base/angular/index.js';
const $compile = getService('$compile');
const $rootScope = getService('$rootScope');
/**
* The TinyMCE editing mode.
*/
export var EditingMode;
(function (EditingMode) {
/** Full editor mode. */
EditingMode["Classic"] = "classic";
/** Distraction free mode. */
EditingMode["DistractionFree"] = "distraction-free";
})(EditingMode || (EditingMode = {}));
/**
* An element wrapping the TinyMCE editor.
*
* @example
*
* Renders a Rich Text Editor in distraction free mode with a link, unlink and a media picker button on the toolbar and the max size of the image inserted of 200.
*
* ```html
* <umbh-tinymce mode="distraction-free" maximagesize="200" toolbar='["link", "unlink", "umbmediapicker"]'></umbh-tinymce>
* ```
*
* @remarks
* Cannot be used inside ShadowDom.
*/
let TinyMceElement = class TinyMceElement extends LitElement {
constructor() {
super();
_TinyMceElement_template.set(this, () => '');
_TinyMceElement_linkedTemplate.set(this, void 0);
_TinyMceElement_scope.set(this, {}
/** Max size of image when inserted. */
);
/** Max size of image when inserted. */
this.maxImageSize = 500;
/** The editing mode. */
this.mode = EditingMode.Classic;
/** Stylesheets to load, must be the name of the stylesheet from the stylesheets tree without the `.css` extension.. */
this.stylesheets = [];
/** The tooblar options. */
this.toolbar = [
'ace',
'styleselect',
'bold',
'italic',
'alignleft',
'aligncenter',
'alignright',
'bullist',
'numlist',
'outdent',
'indent',
'link',
'unlink',
'umbmediapicker',
'umbembeddialog'
];
__classPrivateFieldSet(this, _TinyMceElement_scope, $rootScope.$new(true), "f");
__classPrivateFieldGet(this, _TinyMceElement_scope, "f").model = {
view: 'rte',
config: {
editor: {
mode: this.mode,
stylesheets: this.stylesheets,
toolbar: this.toolbar
}
}
};
__classPrivateFieldGet(this, _TinyMceElement_scope, "f").$watch('model.value', (newValue, oldValue) => {
if (newValue === oldValue)
return;
this.value = newValue;
const event = new InputEvent('input', { bubbles: true, composed: true });
this.dispatchEvent(event);
});
}
/** @ignore */
createRenderRoot() { return this; }
/** @ignore */
connectedCallback() {
super.connectedCallback();
// find the umb-property and fetch the dataTypeKey, this is required
// by some of the server api's to look up if start nodes should be ignored
// and we don't wan't to expose this as a property on this element since
// it's an implementation detail
const propertyElement = this.closest('umb-property');
if (propertyElement !== null) {
const propertyScope = window.angular.element(propertyElement)?.scope();
// @ts-expect-error
__classPrivateFieldGet(this, _TinyMceElement_scope, "f").model.dataTypeKey = propertyScope?.property?.dataTypeKey;
}
// unfortunately the normal rte and the grid rte are two different editors
// even though they are mostly the same the normal does not work inside
// the grid, so we need to detect if we are inside the grid and return
// the correct HTML. If we have a parent element with the css class .umb-grid
// we assume we are inside the grid
const inGrid = this.closest('.umb-grid');
__classPrivateFieldSet(this, _TinyMceElement_template, $compile((inGrid != null)
? '<grid-rte value="model.value" datatype-key="{{ model.dataTypeKey }}" configuration="model.config.editor"></grid-rte>'
: '<ng-form><umb-property-editor model="model"></umb-property-editor></ng-form>'), "f");
}
/** @ignore */
willUpdate(changedProperties) {
if (changedProperties.has('maxImageSize')) {
__classPrivateFieldGet(this, _TinyMceElement_scope, "f").$apply(() => __classPrivateFieldGet(this, _TinyMceElement_scope, "f").model.config.editor.maxImageSize = this.maxImageSize);
}
if (changedProperties.has('mode')) {
__classPrivateFieldGet(this, _TinyMceElement_scope, "f").$apply(() => __classPrivateFieldGet(this, _TinyMceElement_scope, "f").model.config.editor.mode = this.mode);
}
if (changedProperties.has('stylesheets')) {
__classPrivateFieldGet(this, _TinyMceElement_scope, "f").$apply(() => __classPrivateFieldGet(this, _TinyMceElement_scope, "f").model.config.editor.stylesheets = this.stylesheets);
}
if (changedProperties.has('toolbar')) {
__classPrivateFieldGet(this, _TinyMceElement_scope, "f").$apply(() => __classPrivateFieldGet(this, _TinyMceElement_scope, "f").model.config.editor.toolbar = this.toolbar);
}
if (changedProperties.has('value')) {
__classPrivateFieldGet(this, _TinyMceElement_scope, "f").$apply(() => __classPrivateFieldGet(this, _TinyMceElement_scope, "f").model.value = this.value);
}
if (__classPrivateFieldGet(this, _TinyMceElement_linkedTemplate, "f") === undefined) {
__classPrivateFieldSet(this, _TinyMceElement_linkedTemplate, __classPrivateFieldGet(this, _TinyMceElement_template, "f").call(this, __classPrivateFieldGet(this, _TinyMceElement_scope, "f")), "f");
}
}
/** @ignore */
render() {
return html `${__classPrivateFieldGet(this, _TinyMceElement_linkedTemplate, "f")}`;
}
};
_TinyMceElement_template = new WeakMap(), _TinyMceElement_linkedTemplate = new WeakMap(), _TinyMceElement_scope = new WeakMap();
__decorate([
property({ type: Number })
], TinyMceElement.prototype, "maxImageSize", void 0);
__decorate([
property({ type: String })
], TinyMceElement.prototype, "mode", void 0);
__decorate([
property({ type: Array })
], TinyMceElement.prototype, "stylesheets", void 0);
__decorate([
property({ type: Array })
], TinyMceElement.prototype, "toolbar", void 0);
__decorate([
property({ type: String })
], TinyMceElement.prototype, "value", void 0);
TinyMceElement = __decorate([
customElement('umbh-tinymce')
], TinyMceElement);
export default TinyMceElement;
//# sourceMappingURL=index.js.map