@moveo/enhanced-form-core NPM

JS Enhanced form

Why?

Wordpress Gutenberg is fun but Wordpress not.
Friendly editor interface you can use on every html form.

Demo

Installation

npm i @moveo/enhanced-form-core

yarn add @moveo/enhanced-form-core

Configuration

<textarea name="editor-content" id="input-target" cols="30" rows="10"></textarea>

import {attachEnhancedForm} from "@moveo/enhanced-form-core";
import '@moveo/enhanced-form-core/dist/style.css';

// Attach editor to the textarea
const enhancedForm = attachEnhancedForm(
    document.getElementById("input-target"),
    {
        // A callback to handle file selection is required
        // Here simply return a promise with fake image
        onSelectFile: (options) => {
            let id = Math.round(Math.random() * 100 + 100);
            let width = options.imageOptions ? options.imageOptions.width : 500;
            let height = options.imageOptions ? options.imageOptions.height : 500;
            
            return Promise.resolve({
                image:{
                    url: `https://picsum.photos/id/${id}/${width}/${height}`
                }
            });
        }
    }
);

// Don't forget to call the render method
enhancedForm.render();

Easy Way (for curious or/and lazy people)

Use the temporary CDN resources. Here is a full ready to use html example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/@moveo/enhanced-form-core@0.1.5/dist/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: Lato, sans-serif;
        }
    </style>
</head>
<body>
<h2>Form with editor</h2>
<form action="#" method="GET">
    <div>
        <textarea name="editor-content" id="input-target" cols="30" rows="10"></textarea>
    </div>
    <button type="submit">Save form</button>
</form>
<script type="module" defer>
    import {attachEnhancedForm} from 'https://unpkg.com/@moveo/enhanced-form-core@0.1.5/dist/enhancedForm.js';

    const enhancedForm = attachEnhancedForm(
        document.getElementById('input-target'),
        {
            onSelectFile: (options) => {
                let id = Math.round(Math.random() * 100 + 100);
                let width = options.imageOptions ? options.imageOptions.width : 500;
                let height = options.imageOptions ? options.imageOptions.height : 500;

                return Promise.resolve({
                    image: {
                        url: `https://picsum.photos/id/${id}/${width}/${height}`
                    }
                })
            }
        }
    );

    enhancedForm.render();
</script>
</body>
</html>