1. Advisor
  2. draftail
  3. draftail code examples
View all draftail analysis

How to use draftail - 10 common examples

To help you get started, we’ve selected a few draftail examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mirumee / saleor-dashboard / src / components / RichTextEditor / RichTextEditor.tsx View on Github external
icon: ,
              type: INLINE_STYLE.ITALIC
            },
            {
              icon: ,
              type: INLINE_STYLE.STRIKETHROUGH
            }
          ]}
          enableLineBreak
          entityTypes={[
            {
              attributes: ["url"],
              decorator: LinkEntity,
              icon: ,
              source: LinkSource,
              type: ENTITY_TYPE.LINK
            }
            // {
            //   attributes: ["href"],
            //   decorator: ImageEntity,
            //   icon: ,
            //   source: ImageSource,
            //   type: ENTITY_TYPE.IMAGE
            // }
          ]}
        />
      
      {helperText && (
github mirumee / saleor / saleor / static / dashboard-next / components / RichTextEditor / RichTextEditor.tsx View on Github external
icon: ,
              type: INLINE_STYLE.ITALIC
            },
            {
              icon: ,
              type: INLINE_STYLE.STRIKETHROUGH
            }
          ]}
          enableLineBreak
          entityTypes={[
            {
              attributes: ["href"],
              decorator: LinkEntity,
              icon: ,
              source: LinkSource,
              type: ENTITY_TYPE.LINK
            }
            // {
            //   attributes: ["href"],
            //   decorator: ImageEntity,
            //   icon: ,
            //   source: ImageSource,
            //   type: ENTITY_TYPE.IMAGE
            // }
          ]}
        />
      
      {helperText && (
github medialab / website / admin / src / components / entities / link.js View on Github external
onClick={() => onRemove(entityKey)}>Remove
              
            
          
        
      }>
      <a role="button" rel="noopener noreferrer">
        <span>{props.children}</span>
      </a>
    
  );
}

// Entity
const LINK = {
  type: ENTITY_TYPE.LINK,
  icon: ,
  source: LinkSource,
  decorator: LinkDecorator,
  attributes: ['href', 'internal']
};

export default LINK;
github springload / wagtailmodelchoosers / wagtailmodelchoosers / client / sources / RemoteModelSource.js View on Github external
const clone = {};
      fieldsToSave.forEach((field) => {
        clone[field] = data[field];
      });
      itemData = clone;
    } else {
      // Use the whole object.
      itemData = data;
    }

    const nextData = Object.assign({}, itemData, {
      id,
      label,
    });

    const nextState = DraftUtils.createEntity(
      editorState,
      type,
      nextData,
      nextData.label,
      entityMutability,
    );

    onUpdate(nextState);
  }
github wagtail / wagtail / client / src / components / Draftail / sources / ModalWorkflowSource.js View on Github external
export const getChooserConfig = (entityType, entity) => {
  const chooserURL = {};
  chooserURL[ENTITY_TYPE.IMAGE] = `${global.chooserUrls.imageChooser}?select_format=true`;
  chooserURL[EMBED] = global.chooserUrls.embedsChooser;
  chooserURL[ENTITY_TYPE.LINK] = global.chooserUrls.pageChooser;
  chooserURL[DOCUMENT] = global.chooserUrls.documentChooser;

  let url = chooserURL[entityType.type];
  let urlParams = {};

  if (entityType.type === ENTITY_TYPE.LINK) {
    urlParams = {
      page_type: 'wagtailcore.page',
      allow_external_link: true,
      allow_email_link: true,
      can_choose_root: 'false',
      // This does not initialise the modal with the currently selected text.
      // This will need to be implemented in the future.
      // See https://github.com/jpuri/draftjs-utils/blob/e81c0ae19c3b0fdef7e0c1b70d924398956be126/js/block.js#L106.
github medialab / website / admin / src / components / entities / image.js View on Github external
<small><em>format:</em> {formatLabel}</small>
      
      <div>
        <small style="{{textDecoration:"> blockProps.onEditEntity(blockProps.entityKey)}&gt;
          edit
        </small>
      </div>
    
  );
}

// Entity
const IMAGE = {
  type: ENTITY_TYPE.IMAGE,
  icon: ,
  source: ImageSource,
  block: ImageBlock,
  attributes: [
    'credits',
    'format',
    'height',
    'width',
    'src'
  ]
};

export default IMAGE;
github mirumee / saleor-dashboard / src / components / RichTextEditor / RichTextEditor.tsx View on Github external
{ icon: , type: BLOCK_TYPE.HEADER_THREE },
            { icon: , type: BLOCK_TYPE.BLOCKQUOTE },
            {
              icon: ,
              type: BLOCK_TYPE.UNORDERED_LIST_ITEM
            },
            { icon: , type: BLOCK_TYPE.ORDERED_LIST_ITEM }
          ]}
          inlineStyles={[
            {
              icon: ,
              type: INLINE_STYLE.BOLD
            },
            {
              icon: ,
              type: INLINE_STYLE.ITALIC
            },
            {
              icon: ,
              type: INLINE_STYLE.STRIKETHROUGH
            }
          ]}
          enableLineBreak
          entityTypes={[
            {
              attributes: ["url"],
              decorator: LinkEntity,
              icon: ,
              source: LinkSource,
              type: ENTITY_TYPE.LINK
            }
            // {
github mirumee / saleor / saleor / static / dashboard-next / components / RichTextEditor / RichTextEditor.tsx View on Github external
{ icon: , type: BLOCK_TYPE.HEADER_THREE },
            { icon: , type: BLOCK_TYPE.BLOCKQUOTE },
            {
              icon: ,
              type: BLOCK_TYPE.UNORDERED_LIST_ITEM
            },
            { icon: , type: BLOCK_TYPE.ORDERED_LIST_ITEM }
          ]}
          inlineStyles={[
            {
              icon: ,
              type: INLINE_STYLE.BOLD
            },
            {
              icon: ,
              type: INLINE_STYLE.ITALIC
            },
            {
              icon: ,
              type: INLINE_STYLE.STRIKETHROUGH
            }
          ]}
          enableLineBreak
          entityTypes={[
            {
              attributes: ["href"],
              decorator: LinkEntity,
              icon: ,
              source: LinkSource,
              type: ENTITY_TYPE.LINK
            }
            // {
github mirumee / saleor / saleor / static / dashboard-next / components / RichTextEditor / RichTextEditor.tsx View on Github external
type: BLOCK_TYPE.UNORDERED_LIST_ITEM
            },
            { icon: , type: BLOCK_TYPE.ORDERED_LIST_ITEM }
          ]}
          inlineStyles={[
            {
              icon: ,
              type: INLINE_STYLE.BOLD
            },
            {
              icon: ,
              type: INLINE_STYLE.ITALIC
            },
            {
              icon: ,
              type: INLINE_STYLE.STRIKETHROUGH
            }
          ]}
          enableLineBreak
          entityTypes={[
            {
              attributes: ["href"],
              decorator: LinkEntity,
              icon: ,
              source: LinkSource,
              type: ENTITY_TYPE.LINK
            }
            // {
            //   attributes: ["href"],
            //   decorator: ImageEntity,
            //   icon: ,
            //   source: ImageSource,
github mirumee / saleor-dashboard / src / components / RichTextEditor / RichTextEditor.tsx View on Github external
type: BLOCK_TYPE.UNORDERED_LIST_ITEM
            },
            { icon: , type: BLOCK_TYPE.ORDERED_LIST_ITEM }
          ]}
          inlineStyles={[
            {
              icon: ,
              type: INLINE_STYLE.BOLD
            },
            {
              icon: ,
              type: INLINE_STYLE.ITALIC
            },
            {
              icon: ,
              type: INLINE_STYLE.STRIKETHROUGH
            }
          ]}
          enableLineBreak
          entityTypes={[
            {
              attributes: ["url"],
              decorator: LinkEntity,
              icon: ,
              source: LinkSource,
              type: ENTITY_TYPE.LINK
            }
            // {
            //   attributes: ["href"],
            //   decorator: ImageEntity,
            //   icon: ,
            //   source: ImageSource,

draftail

📝🍸 A configurable rich text editor built with Draft.js

GitHub
MIT
Latest version published 3 years ago

Package Health Score

60 / 100
Full package analysis

Popular draftail functions

Similar packages