Some fixes and optimizations in sandboxes.
Start of a sandbox for GrapeJS
This commit is contained in:
parent
02a7275ae4
commit
e2093e22fe
22 changed files with 742 additions and 294 deletions
|
@ -2,23 +2,16 @@
|
|||
|
||||
import React, {Component} from 'react';
|
||||
import {translate} from 'react-i18next';
|
||||
import PropTypes from "prop-types";
|
||||
import styles from "./sandboxed-ckeditor.scss";
|
||||
import PropTypes
|
||||
from "prop-types";
|
||||
import styles
|
||||
from "./sandboxed-ckeditor.scss";
|
||||
|
||||
import {UntrustedContentHost, parentRPC} from './untrusted';
|
||||
import {UntrustedContentHost} from './untrusted';
|
||||
import {Icon} from "./bootstrap-components";
|
||||
import {
|
||||
getPublicUrl,
|
||||
getSandboxUrl,
|
||||
getTrustedUrl
|
||||
} from "./urls";
|
||||
import {
|
||||
base,
|
||||
unbase
|
||||
} from "../../../shared/templates";
|
||||
import CKEditor from "react-ckeditor-component";
|
||||
import {getTrustedUrl} from "./urls";
|
||||
|
||||
const initialHeight = 600;
|
||||
import { initialHeight } from "./sandboxed-ckeditor-shared";
|
||||
const navbarHeight = 34; // Sync this with navbarheight in sandboxed-ckeditor.scss
|
||||
|
||||
@translate(null, { withRef: true })
|
||||
|
@ -108,62 +101,3 @@ CKEditorHost.prototype.exportState = async function() {
|
|||
};
|
||||
|
||||
|
||||
@translate(null, { withRef: true })
|
||||
export class CKEditorSandbox extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const trustedUrlBase = getTrustedUrl();
|
||||
const sandboxUrlBase = getSandboxUrl();
|
||||
const publicUrlBase = getPublicUrl();
|
||||
const html = this.props.initialHtml && base(this.props.initialHtml, trustedUrlBase, sandboxUrlBase, publicUrlBase);
|
||||
|
||||
this.state = {
|
||||
html
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
entityTypeId: PropTypes.string,
|
||||
entityId: PropTypes.number,
|
||||
initialHtml: PropTypes.string
|
||||
}
|
||||
|
||||
async exportState(method, params) {
|
||||
const trustedUrlBase = getTrustedUrl();
|
||||
const sandboxUrlBase = getSandboxUrl();
|
||||
const publicUrlBase = getPublicUrl();
|
||||
return {
|
||||
html: unbase(this.state.html, trustedUrlBase, sandboxUrlBase, publicUrlBase, true)
|
||||
};
|
||||
}
|
||||
|
||||
async setHeight(methods, params) {
|
||||
this.node.editorInstance.resize('100%', params);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
parentRPC.setMethodHandler('exportState', ::this.exportState);
|
||||
parentRPC.setMethodHandler('setHeight', ::this.setHeight);
|
||||
}
|
||||
|
||||
render() {
|
||||
const config = {
|
||||
removeButtons: 'Underline,Subscript,Superscript,Maximize',
|
||||
resize_enabled: false,
|
||||
height: initialHeight
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.sandbox}>
|
||||
<CKEditor ref={node => this.node = node}
|
||||
content={this.state.html}
|
||||
events={{
|
||||
change: evt => this.setState({html: evt.editor.getData()}),
|
||||
}}
|
||||
config={config}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue