import React , { PropsWithChildren , MutableRefObject } from "react" ; import ReactDOM from "react-dom" ; import { cx , css } from "emotion" ; interface BaseProps { className : string ; [ key ] : unknown ; } export const Button = React . forwardRef ( ( { className , active , reversed , ... props } , ref ) => ( < span { ... props } ref = { ref } className = { cx ( className , css `
          cursor: pointer;
          color: ${ reversed ? active ? "white" : "#aaa" : active ? "black" : "#aaa" } ; `)}/>));
export const EditorValue = React.forwardRef(({ className, value, ...props }, ref) => {
    const textLines = value.document.nodes
        .map((node) => node.text)
        .toArray()
        .join("\n");
    return (<div ref={ref} {...props} className={cx(className, css ` margin : 30 px - 20 px 0 ; `)}>
        <div className={css ` font - size : 14 px ; padding : 5 px 20 px ; color : # 404040 ; border - top : 2 px solid #eeeeee ; background : #f8f8f8 ; `}>
          Slate's value as text
        </div>
        <div className={css ` color : # 404040 ; font : 12 px monospace ; white - space : pre - wrap ; padding : 10 px 20 px ; div { margin : 0 0 0.5e m ; } `}>
          {textLines}
        </div>
      </div>);
});
export const Instruction = React.forwardRef(({ className, ...props }, ref) => (<div {...props} ref={ref} className={cx(className, css ` white - space : pre - wrap ; margin : 0 - 20 px 10 px ; padding : 10 px 20 px ; font - size : 14 px ; background : #f8f8e8 ; `)}/>));
export const Menu = React.forwardRef(({ className, ...props }, ref) => (<div {...props} ref={ref} className={cx(className, css ` & > * { display : inline - block ; } & > * + * { margin - left : 15 px ; } `)}/>));
export const Portal = ({ children }) => {
    return ReactDOM.createPortal(children, document.body);
};
export const Toolbar = React.forwardRef(({ className, ...props }, ref) => (<Menu {...props} ref={ref} className={cx(className, css ` position : relative ; padding : 1 px 18 px 17 px ; margin : 0 - 20 px ; border - bottom : 2 px solid #eee ; margin - bottom : 20 px ; `)}/>));
