diff --git a/src/mongo/remoteTextMongo.ts b/src/mongo/remoteTextMongo.ts index c274ae3..e428e98 100644 --- a/src/mongo/remoteTextMongo.ts +++ b/src/mongo/remoteTextMongo.ts @@ -4,7 +4,15 @@ import {Option} from "tsla-util/lib/option" import {RemoteTextRecord} from "../core/remoteTextRecord" import {RemoteTextDocument} from "../core/remoteTextValue" -const allowedTags = sanitizeHtml.defaults.allowedTags.filter(e => e !== "iframe") +const allowedTags = sanitizeHtml.defaults.allowedTags.filter(e => e !== "iframe").concat("span") + +const allowedAttributes = { + a: ["href", "name", "target", "style"], + img: ["src"], + p: ["style"], + span: ["style"], + div: ["style"] +} export interface RemoteTextSchema { namespace: string @@ -47,7 +55,8 @@ export class RemoteTextMongo { $set: { [`document.${record.id}`]: { html: sanitizeHtml(record.html, { - allowedTags + allowedTags, + allowedAttributes }) } } diff --git a/src/mui/editModal.tsx b/src/mui/editModal.tsx index 1856fa1..a329167 100644 --- a/src/mui/editModal.tsx +++ b/src/mui/editModal.tsx @@ -2,8 +2,6 @@ import Button from "@material-ui/core/Button" import Grid from "@material-ui/core/Grid" import Modal, {ModalProps} from "@material-ui/core/Modal" import Paper from "@material-ui/core/Paper" -import {SvgIconProps} from "@material-ui/core/SvgIcon" -import EditIcon from "@material-ui/icons/Edit" import * as React from "react" import {RemoteTextRecord} from "../core/remoteTextRecord" import {RemoteTextNode, RemoteTextValue} from "../core/remoteTextValue" @@ -16,12 +14,10 @@ declare module "medium-editor" { } } -export interface EditModalProps { +export interface EditModalProps extends ModalProps { t: (document: T) => RemoteTextValue namespace?: string - modalProps?: Partial - onModalOpen?: (open: boolean) => any - editIconProps?: SvgIconProps + onSave?: () => any } export interface EditModal extends WithRemoteTextContext { @@ -48,19 +44,6 @@ export class EditModal extends React.Component { - this.setState({modalOpen}, () => { - const {onModalOpen} = this.props - if (onModalOpen != null) { - onModalOpen(this.state.modalOpen) - } - }) - } - componentDidMount() { document.body.appendChild(this.el) } @@ -86,7 +69,10 @@ export class EditModal extends React.Component extends React.Component this.changeModalOpen(false) - - return <> - this.changeModalOpen(true)} {...editIconProps}/> - - - - - - + const {t, namespace, onSave, ...rest} = this.props + + return + + + + - - - - + + + - - + + } } diff --git a/src/mui/editModalButton.tsx b/src/mui/editModalButton.tsx new file mode 100644 index 0000000..64bf5ad --- /dev/null +++ b/src/mui/editModalButton.tsx @@ -0,0 +1,46 @@ +import {SvgIconProps} from "@material-ui/core/SvgIcon" +import EditIcon from "@material-ui/icons/Edit" +import * as React from "react" +import {RemoteTextNode, RemoteTextValue} from "../core/remoteTextValue" +import {WithRemoteTextContext} from "../react/withRemoteText" +import {EditModal, EditModalProps} from "./editModal" + +export interface EditModalButtonProps { + t: (document: T) => RemoteTextValue + namespace?: string + editModalProps?: Partial> + onModalOpen?: (open: boolean) => any + editIconProps?: SvgIconProps +} + +export interface EditModalButton extends WithRemoteTextContext { + +} + +export class EditModalButton extends React.Component> { + state = { + modalOpen: false + } + + changeModalOpen = (modalOpen: boolean) => { + this.setState({modalOpen}, () => { + const {onModalOpen} = this.props + if (onModalOpen != null) { + onModalOpen(this.state.modalOpen) + } + }) + } + + render() { + const {t, editModalProps, editIconProps, onModalOpen, namespace} = this.props + const {modalOpen} = this.state + const closeModal = () => this.changeModalOpen(false) + + return <> + this.changeModalOpen(true)} {...editIconProps}/> + + + + } +} diff --git a/src/mui/editRemoteTextModal.tsx b/src/mui/editRemoteTextModal.tsx index 3ec848c..e91d90c 100644 --- a/src/mui/editRemoteTextModal.tsx +++ b/src/mui/editRemoteTextModal.tsx @@ -5,14 +5,15 @@ import * as React from "react" import {RemoteTextNode, RemoteTextValue} from "../core/remoteTextValue" import {RemoteText} from "../react/remoteText" import {withRemoteText, WithRemoteTextContext} from "../react/withRemoteText" -import {EditModal} from "./editModal" +import {EditModal, EditModalProps} from "./editModal" +import {EditModalButton} from "./editModalButton" export interface EditRemoteTextModalProps extends Partial { t: (document: T) => RemoteTextValue namespace?: string children: (value: RemoteTextValue) => React.ReactElement editIconProps?: SvgIconProps - modalProps?: Partial + editModalProps?: Partial> onModalOpen?: (open: boolean) => any } @@ -29,7 +30,7 @@ export class EditRemoteTextModal extends React.Compone changeShowEditIcon = (showEditIcon: boolean) => this.setState({showEditIcon}) render() { - const {t, children, modalProps, onModalOpen, namespace, editIconProps, ...rest} = this.props + const {t, children, editModalProps, onModalOpen, namespace, editIconProps, ...rest} = this.props const {showEditIcon} = this.state return <> extends React.Compone {children} - {showEditIcon && } + {showEditIcon && + } diff --git a/src/react/mediumEditor.tsx b/src/react/mediumEditor.tsx index 0a3ba3b..2e1bced 100644 --- a/src/react/mediumEditor.tsx +++ b/src/react/mediumEditor.tsx @@ -15,7 +15,8 @@ export class MediumEditor extends React.Component { this.medium = new MediumEditorBase(dom, { paste: { forcePlainText: false - } + }, + targetBlank: true }) this.medium.subscribe("editableInput", () => { const {onTextChange} = this.props