A custom Decap widget like "string", that only allows a single character

decapCharWidget.js

/**  DECAP CHAR WIDGET 
 * 
 * A custom Decap widget like "string", that only allows a single character 
 * 
 *   INSTALLATION  
 * 
 * 1.) Drop/load this script the directory with Decap's index.html, and add: 

<script src="decapServerWarning.js"></script>

 * to index.html's body 
 * 
 * 2.) In your config.yml, use the "char" widget as you would any other 
 * widget, such as the "string" widget. For example: 

collections:
  - name: 'groups'
    label: 'Groups'
    summary: "{{letter}}: {{label}}"
    fields:
      - { label: "Label", name: "label", widget: "string" }
      - { label: "Letter", name: "letter", widget: "char", default: 'A' }

 * ...and you're good to go! 
 * 
 * See Decap's custom widgets docs for more info 
 * https://decapcms.org/docs/custom-widgets/
 */


const CharControl = createClass({

    handleChange: function (e) {
        this.props.onChange(e.target.value);
    },

    isValid: function () {
        const value = this.props.value;

        // decap built-in required validation to handle empty values.
        if (value === undefined || value === null || value === '') {
            return true;
        }

        // don't just check string length, convert to array and get THAT length 
        // so that non-ASCII chars stop being so rude 
        if (Array.from(value).length !== 1) {
            return {
                error: { message: 'Must be exactly one character' }
            };
        }

        return true;
    },

    render: function () {
        return h('input', {
            id: this.props.forID,
            className: this.props.classNameWrapper,
            type: 'text',
            value: this.props.value || '',
            onChange: this.handleChange,
            maxLength: 1
        });
    }
});

const CharPreview = createClass({
    render: function () {
        return h('span', {}, this.props.value || '');
    }
});

CMS.registerWidget('char', CharControl, CharPreview);

/** Hosted on GitHub Gist 
 * https://gist.github.com/nickyonge/92cbb5f9a93f3372ba182e07f92ee9ae */

/** 
 * LICENSE INFO 
 *
 *   This script was written by Nick Yonge, 2026, and is released 
 *   under the terms of The Unlicense:
 * 
 * This is free and unencumbered software released into the public domain.
 * 
 * Anyone is free to copy, modify, publish, use, compile, sell, or
 * distribute this software, either in source code form or as a compiled
 * binary, for any purpose, commercial or non-commercial, and by any
 * means.
 * 
 * In jurisdictions that recognize copyright laws, the author or authors
 * of this software dedicate any and all copyright interest in the
 * software to the public domain. We make this dedication for the benefit
 * of the public at large and to the detriment of our heirs and
 * successors. We intend this dedication to be an overt act of
 * relinquishment in perpetuity of all present and future rights to this
 * software under copyright law.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 * IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
 * OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 * 
 * For more information, please refer to <https://unlicense.org/>
 */