Filename is not always good permalink. Can we add new widget?

[reatlat]

FIle slug is not always good permalink for SEO, so I need to allow authors to edit permalink slug manually, but at same time I have to make sure the permalink is right formatted.

In DecapCMS I wrote a small widget which help me make clean permalinks and store them in front-matter, is it possible to make same/similar with sveltia-cms?

  CMS.registerWidget(
    'permalink',
    createClass({
      slugify(str, allowSubdir = false) {
        return str
          .normalize('NFD')                                           // Remove diacritics
          .replace(/[\u0300-\u036f]/g, '')                            // Normalize accents
          .toLowerCase()                                              // Convert to lowercase
          .trim()                                                     // Trim leading/trailing spaces
          .replace(/&/g, 'and')                                       // Replace '&' with 'and'
          .replace(allowSubdir ? /[^a-z0-9/]+/g : /[^a-z0-9]+/g, '-') // Allow slash if subdir is enabled
          .replace(/-{2,}/g, '-')                                     // Replace multiple hyphens with single hyphen
          .replace(/\/{2,}/g, '/')                                    // Replace multiple slashes with single slash
          .replace(/^-+|-+$/g, '');                                   // Trim leading/trailing hyphens
      },

      getInitialState() {
        const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          let r = Math.random() * 16 | 0;
          let v = c === 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
        });
        const prefix = this.props.field.get("prefix") || "blog";
        const permalink = `/${prefix}/${uuid}/`.replace(/\/{2,}/g, "/");
        return {
          rawValue: this.props.value || permalink, // Store raw input
          value: this.props.value || permalink,
          editing: false,
        };
      },

      handleEdit() {
        this.setState({ editing: true });
      },

      handleChange(event) {
        // ✅ Allow any characters during input
        this.setState({ rawValue: event.target.value });
      },

      handleBlur() {
        const prefix = this.props.field.get('prefix') || '';
        const allowSubdir = this.props.field.get('subdir') || false;
        let value = this.state.rawValue;

        // 🔥 Remove existing prefix if present
        const prefixRegex = new RegExp(`^/?${prefix}/?`);
        value = value.replace(prefixRegex, '');

        // ✅ Slugify on blur (after user finishes editing)
        const slugifiedValue = this.slugify(value, allowSubdir)
          .replace(/^\/|\/$/g, ''); // Remove leading/trailing slashes

        // 🎯 Reconstruct permalink with prefix
        const finalValue = `/${prefix}/${slugifiedValue}/`.replace(/\/{2,}/g, '/');

        this.setState({
          rawValue: finalValue,
          value: finalValue,
          editing: false,
        });
        this.props.onChange(finalValue);
      },

      handleBlurWrapper(event) {
        this.handleBlur(event);          // Call existing blur handler
        this.props.setInactiveStyle();   // Call setInactiveStyle after
      },

      render() {
        const prefix = this.props.field.get('prefix') || '';
        const { rawValue, value, editing } = this.state;
        const classNameWrapper = this.props.classNameWrapper;
        const setActiveStyle = this.props.setActiveStyle;
        const forID = this.props.forID;

        return editing
          ? h('input', {
            id: forID,
            className: classNameWrapper,
            type: 'text',
            value: prefix ? rawValue.replace(new RegExp(`^/${prefix}/`), '') : rawValue,
            onChange: this.handleChange,
            onBlur: this.handleBlurWrapper.bind(this), // 🔗 Call both handlers
            onFocus: setActiveStyle,
            autoFocus: true,
          })
          : h(
            'div',
            {
              id: forID,
              className: classNameWrapper,
              style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
            },
            h('span', {
              style: { overflowX: 'auto', whiteSpace: 'nowrap', padding: '16px 0', margin: '-16px 0', fontSize: '15px', lineHeight: '1.5' },
            }, value),
            h(
              'button',
              {
                type: 'button',
                onClick: this.handleEdit,
                style: { margin: '0 0 0 20px', cursor: 'pointer' },
                title: 'Edit permalink',
              },
              'Edit'
            )
          )
      },
    })
  );

[kyoshino]

Custom widgets are not supported in Sveltia CMS — my plan to add the support before 1.0 due this Q3. In the meantime you could perhaps create a normal string field for the permalink and use a custom formatter to modify it,

[reatlat]

Hey @kyoshino this is exactly what I was also thinking to do as a solution for my needs :)
Thank you, meantime, the permalink widget as default part of CMS will be really nice, Thank you