Editable.fusion

prototype(Carbon.BackendDocument:Editable) < prototype(Neos.Fusion:Component) {
    node = ${node}

    // The name of the property which should be accessed
    property = ${null}

    // Style of input
    // - input = No linebreaks, no tags, but autogrowing
    // - select = Select values, uses `options` and `optionGroups` DataStructure
    // - radio = Radio buttons, uses `options` DataStructure
    // - block = Default editor, block style
    // - inline = Default editor, inline style
    type = 'input'

    // Used for type select and radio
    options = Neos.Fusion:DataStructure
    // Used for type select
    optionGroups = Neos.Fusion:DataStructure
    /*
    Example for optionGroups
    optionGroups {
        group {
            label = 'The label'
            disabled = false
            options {
                key = 'Value'
            }
        }
    }
    */

    // Prepend a label
    label = ${null}

    // Overwrite the placeholder from the nodetype definition
    placeholder = ${null}

    // Add your own CSS class if you want to override some stylings
    class = ${null}

    // Add your own style
    style = ${null}

    // If set to true and used under Carbon.BackendDocument:Document, the styling will adapt to the inspector style
    inspectorStyle = true

    // Inlcude the styling.
    // Be aware! If one elment on a document has set this to true, this get's included for the whole document
    includeCSS = true

    // Fallback for the frontend if no value is given
    fallback = ${null}

    // Switch if the value should be editable
    editable = true

    // Internal
    block = ${this.type == 'block'}
    value = ${q(this.node).property(this.property)}
    disabled = ${this.node.context.inBackend && this.node.context.currentRenderingMode.edit ? null : true}
    id = ${this.property + this.node.identifier + Math.randomInt(0, 10000)}
    nativeEditor = ${this.type == 'block' || this.type == 'inline'}
    inBackend = ${this.node.context.inBackend}
    // https://github.com/sandstorm/Sandstorm.CookiePunch is installed
    sandstormCookiePunchIsInstalled = ${Configuration.setting('Neos.Neos.fusion.autoInclude')['Sandstorm.CookiePunch']}
    dataNeverBlock = ${!!this.sandstormCookiePunchIsInstalled}

    @if.hasNodeAndPropertyAndType = ${this.node && this.property && Type.isString(this.type)}

    renderer = afx`
        {!props.inBackend || !props.editable ? (props.value || props.fallback) : ''}
        <div
            @if.set={props.inBackend && props.editable}
            class={[BEM.modifier('carbon-backenddocument-editable', props.inspectorStyle ? 'inspector' : 'default'), props.class]}
            style={props.style}
        >
            <link
                @if.set={props.includeCSS}
                rel='stylesheet'
                data-slipstream
                href={StaticResource.uri('Carbon.BackendDocument', 'Public/Editable.css')}
            />
            <script src={StaticResource.uri('Carbon.BackendDocument', 'Public/Editable.js')} data-slipstream defer data-never-block={props.dataNeverBlock}></script>
            <label
                @if.set={props.label && !props.nativeEditor}
                class='carbon-backenddocument-editable__label'
                for={props.id}
            >
                {props.label}
            </label>
            <div
                @if.set={props.label && props.nativeEditor}
                class='carbon-backenddocument-editable__label'
            >
                {props.label}
            </div>
            <div
                @if.set={props.type == 'radio'}
                class='carbon-backenddocument-editable__radio'
            >
                <Neos.Fusion:Loop items={props.options}>
                    <label>
                        <input type='radio' name={props.id} value={itemKey} checked={props.value == itemKey} />
                        <span>{item}</span>
                    </label>
                </Neos.Fusion:Loop>
            </div>
            <div @if.set={props.type == 'select'} class='carbon-backenddocument-editable__select'>
                <select
                    id={props.id}
                    disabled={props.disabled}
                >
                    <option
                        @if.set={!props.value}
                        selected
                        class='carbon-backenddocument-editable__selectplaceholder'
                    >
                        {props.placeholder}
                    </option>
                    <Carbon.BackendDocument:Editable.Fragment.Options
                        options={props.options}
                        optionGroups={props.optionGroups}
                        value={props.value}
                    />
                </select>
                {'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 14 14"><path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" d="M3 8.5l4 4 4-4M3 5.5l4-4 4 4"/></svg>'}
            </div>
            <div @if.set={props.type == 'input'} class='carbon-backenddocument-editable__input'>
                <textarea id={props.id} disabled={props.disabled} rows={1} placeholder={props.placeholder}>
                    {props.value}
                </textarea>
            </div>
            <Neos.Fusion:Augmenter style={!props.nativeEditor ? 'display:none' : null}>
                <Neos.Neos:Editable
                    node={props.node}
                    property={props.property}
                    block={props.block}
                />
            </Neos.Fusion:Augmenter>
        </div>
    `
}