@cmk/fe_utils/src/html_editor/editorComponents/components/Image/imagePropsRawSchema.ts

frontend utility library

import { CSS_RULE_NAMES_DICT_FULL } from '../../../defs'
import {
  BASE_POINTER_EVENTS,
  CLIPBOARD_EVENTS,
  FOCUS_EVENTS,
  KEYBOARD_EVENTS,
  MOUSE_EVENTS,
  POINTER_EVENTS,
  TOUCH_EVENTS,
} from '../../commonEventSchemas'
import { PropertyType, ExtendedObjectSchemaType } from '../../schemaTypes'

// raw schema to use until schema can be generated reliably from typescript parser/checker
export const imagePropsSchema: ExtendedObjectSchemaType = {
  type: PropertyType.Object,
  required: true,
  properties: {
    src: {
      type: PropertyType.imageSrc,
      required: false,
      category: 'shortcut',
    },
    width: {
      type: PropertyType.cssSize,
      required: false,
      category: 'shortcut',
    },
    height: {
      type: PropertyType.cssSize,
      required: false,
      category: 'shortcut',
    },
    alt: {
      type: PropertyType.String,
      required: false,
      category: 'shortcut',
    },
    display: {
      type: PropertyType.String,
      required: false,
      category: 'shortcut',
      form: {
        defaultValue: 'inline-block',
      },
      enum: [
        'block',
        'inline',
        'flex',
        'grid',
        'inline-block',
        'inline-flex',
        'inline-grid',
      ],
    },
    position: {
      type: PropertyType.String,
      required: false,
      category: 'shortcut',
      form: {
        defaultValue: 'static',
      },
      enum: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
    },

    allProps: {
      type: PropertyType.json,
      form: {
        defaultValue: {},
        // label: 'sx',
      },
      label: 'allProps',
      // keysDict: CSS_RULE_NAMES_DICT_FULL,
      valueTransformer: (formData: any) => {
        const { allProps, element_id, ...rest } = formData
        return rest
      },
      changeValueToFormDataTransformer: (
        _currentFormData: Record<string, unknown>,
        newValue: unknown
      ) => {
        return newValue
      },
      category: 'customize',
    } as any,
    sx: {
      type: PropertyType.json,
      form: {
        defaultValue: {},
        label: 'allProps.sx (styles)',
      },
      keysDict: CSS_RULE_NAMES_DICT_FULL,
      category: 'customize',
    },
    ...BASE_POINTER_EVENTS,
    ...MOUSE_EVENTS,
    ...POINTER_EVENTS,
    ...KEYBOARD_EVENTS, // work only when element is clickable or focusable
    ...TOUCH_EVENTS,
    ...CLIPBOARD_EVENTS,
    ...FOCUS_EVENTS,
  },
}