gustav1105

declare module "draft-js-plugins-utils" {
  import { EditorState, DraftEntityType, EntityInstance } from "draft-js";

  function createLinkAtSelection(
    editorState: EditorState,
    url: string
  ): EditorState;

  function getCurrentEntityKey(editorState: EditorState): string | null;

gustav1105

React.useEffect(() => {
    if (getVisibleSelectionRect(window) !== null) {
      setSelectionRect(getVisibleSelectionRect(window));
    }
  }, [editorState, setSelectionRect]);

gustav1105

const [selectionRect, setSelectionRect] = React.useState<{
    left: number;
    width: number;
    right: number;
    top: number;
    bottom: number;
    height: number;
  }>({ left: 0, width: 0, right: 0, top: 0, bottom: 0, height: 0 });

gustav1105

import { ContentBlock, ContentState } from "draft-js";

const matchesEntityType = (type: string) => type === "LINK";
export function linkStrategy(
  contentBlock: ContentBlock,
  cb: (start: number, end: number) => void,
  contentState: ContentState
) {
  if (!contentState) return;
  contentBlock.findEntityRanges(character => {

gustav1105

import { ContentBlock, ContentState } from "draft-js";

const matchesEntityType = (type: string) => type === "LINK";
export function linkStrategy(
  contentBlock: ContentBlock,
  cb: (start: number, end: number) => void,
  contentState: ContentState
) {
  if (!contentState) return;
  contentBlock.findEntityRanges(character => {

gustav1105

import * as React from "react";
import { EditorContext } from "./EditorContext";

export function DecoratedLink({
  className,
  children,
  entityKey,
  target
}: {
  className: string;

gustav1105

<TextField
          variant="outlined"
          InputProps={{
            endAdornment: (
              <InputAdornment position="start">
                <IconButton
                  onClick={() => {
                    setEditorState(
                      draftUtils.createLinkAtSelection(editorState, anchorElUrl)
                    );

gustav1105

import * as React from "react";
//eslint-disable-next-line
export const MediaComponent = ({ blockProps }: any) => {
  const src = blockProps.src;
  if (src.file) {
    return (
      <img
        style={{
          width: "100%"
        }}

gustav1105

const renderBlock = (contentBlock: ContentBlock) => {
    if (contentBlock.getType() === "atomic") {
      const entityKey = contentBlock.getEntityAt(0);
      const entityData = editorState
        .getCurrentContent()
        .getEntity(entityKey)
        .getData();
      return {
        component: MediaComponent,
        editable: false,

gustav1105

<input
        id="fileInput"
        style={{ display: "none" }}
        type="file"
        accept="image/png,image/jpeg,image/jpg,image/gif"
        onChange={event => {
          const reader = new FileReader();
          reader.addEventListener(
            "load",
            function() {