Socket
Socket
Sign inDemoInstall

@mercuriya/slate-linkify

Package Overview
Dependencies
6
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mercuriya/slate-linkify

A Slate plugin that replaces pasted URLs with an anchor tags.


Version published
Weekly downloads
596
increased by35.15%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

slate-linkify

Plugin transforms typed or pasted hyperlinks into an anchor tags.

Installation

yarn add @mercuriya/slate-linkify
npm install @mercuriya/slate-linkify --save

Configuration

In your file with Slate component:

import React from 'react';
import { createEditor } from 'slate';
import { Slate, Editable, useSlateStatic, withReact } from 'slate-react';
import { onKeyDown as linkifyOnKeyDown, withLinkify } from '@mercuriya/slate-linkify';
import Link from '@material-ui/core/Link';

export default function EditorComponent(props) {
  const [value, setValue] = useState([ /* some initial state here */ ]);
  const editor = useMemo(
    () =>
      withLinkify(withReact(createEditor()), {
        // slate-linkify options
        renderComponent: props => <Link {...props} />,
      }),
    [],
  );
  const renderElement = useCallback(props => <Element {...props} />, []);
  const onKeyDown = useCallback(function handleKeyDown(event) {
    linkifyOnKeyDown(event, editor);
  }, []);

  return (
    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
      <Editable renderElement={renderElement} onKeyDown={onKeyDown} />
    </Slate>
  );
}

const Element = ({ attributes, children, element }) => {
  const editor = useSlateStatic();
  switch (element.type) {
    case 'link':
      // ❗️ this part is required
      return editor.linkElementType({ attributes, children, element });
    default:
      return <p {...attributes}>{children}</p>;
  }
};

Description

This plugin inspired by amazing draft-js-linkify-plugin and slate plugins official examples. It allows user to create links while typing or pasting without any additional manipulations.

It has issues, like: it doesn't know if remote site should use https or not. For example in cases like: typing...typing... google.com continue typing.... It is also ignores html pastes, because, in my opinion, they should be handled by other plugins, as official paste-html example does.

Please, see stories for more usage examples.

Options

NameTypeDescription
target? (default: _blank)stringAn anchor target property
rel? (default: noreferrer noopener)stringAn anchor rel property
className?stringAn anchor custom class name
renderComponent?args => React.ReactNodeA render function that allows you to use a custom link component with props you need

Keywords

FAQs

Package last updated on 19 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc