How to use direction - 6 common examples

dir?: 'rtl'
    ref: any
  } = {
    'data-slate-node': 'element',
    ref,
  }

  if (isInline) {
    attributes['data-slate-inline'] = true
  }

  // If it's a block node with inline children, add the proper `dir` attribute
  // for text direction.
  if (!isInline && Editor.hasInlines(editor, element)) {
    const text = Node.string(element)
    const dir = getDirection(text)

    if (dir === 'rtl') {
      attributes.dir = dir
    }
  }

  // If it's a void node, wrap the children in extra void-specific elements.
  if (Editor.isVoid(editor, element)) {
    attributes['data-slate-void'] = true

    if (!readOnly && isInline) {
      attributes.contentEditable = false
    }

    const Tag = isInline ? 'span' : 'div'
    const [[text]] = Node.texts(element)

getTextDirection() {
    const dir = getDirection(this.text)
    return dir === 'neutral' ? null : dir
  }

export default function DirectionProvider({
  children,
  dir,
  inline,
  value,
}: DirectionProviderProps) {
  const Tag = inline ? 'span' : 'div';
  let direction: Direction = dir || getDirection(value);

  if (!direction || direction === 'neutral') {
    direction = aesthetic.options.rtl ? 'rtl' : 'ltr';
  }

  return (
    
      {children}
    
  );
}

	marqueeDirection: (str) => direction(str) === 'rtl' ? 'rtl' : 'ltr'
};

function AutoDirectionProvider({
  children,
  direction,
  inline,
  text,
}) {
  const textDirection = getDirection(text);
  const dir = textDirection === 'neutral' ? direction : textDirection;

  return (
    
      {React.Children.only(children)}
    
  );
}