@fortawesome/free-brands-svg-icons#faMarkdown TypeScript Examples

The following examples show how to use @fortawesome/free-brands-svg-icons#faMarkdown. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: MarkdownTextarea.tsx    From frontend.ro with MIT License 4 votes vote down vote up 
function MarkdownTextarea({
  title = 'Modifică',
  markdown = '',
  className = '',
  disabled = false,
  initialTab = 'EDIT',
  onInput,
  onUpload,
}: Props) {
  const previewRef = useRef(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const [isPreview, setIsPreview] = useState(initialTab === 'PREVIEW');
  const [isFechingMarked, setIsFetchingMarked] = useState(false);
  const [isUploading, setIsUploading] = useState(false);

  const textareaInput = (e) => {
    const text = e.target.value;
    onInput(text);
  };

  const fileInput = (e: React.ChangeEvent<HTMLInputElement>) => uploadFiles([...e.target.files]);

  const uploadFiles = async (files: File[]) => {
    const validFiles = filterFiles(files, IMAGES_MIME_TYPES);

    if (!validFiles.length) {
      return;
    }

    setIsUploading(true);
    const cursorPosition = textareaRef.current.selectionStart;

    try {
      await onUpload(validFiles, cursorPosition);
    } catch (err) {
      SweetAlertService.toast({
        text: err.message || 'Oops! Nu am putut încărca poza ta. Încearcă din nou!',
        type: 'error',
      });
    } finally {
      setIsUploading(false);
      fileInputRef.current.value = null;
    }
  };

  const paste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
    const first = e.clipboardData.items[0];

    if (first?.kind === 'file') {
      uploadFiles([first.getAsFile()]);
    }
  };

  useEffect(() => {
    if (isPreview) {
      setIsFetchingMarked(true);
      import('marked')
        .then((module) => {
          const { marked } = module;

          previewRef.current.innerHTML = marked.parse(markdown);
        })
        .catch((err) => {
          previewRef.current.innerHTML = '<p style="color: red;"> Oops! Verifică conexiunea la net și încearcă din nou </p>';
        })
        .finally(() => setIsFetchingMarked(false));
    }
  }, [isPreview]);

  return (
    <div className={`${styles['markdown-textarea']} ${className}`}>
      <label className={`${styles.label} ${isPreview ? '' : `${styles['is--checked']}`}`}>
        {title}
        <input checked={!isPreview} onChange={() => setIsPreview(false)} type="radio" name="nav" hidden />
      </label>
      <label className={`${styles.label} ${isPreview ? `${styles['is--checked']}` : ''}`}>
        {isFechingMarked
          ? <FontAwesomeIcon width="20" className="text-white rotate" icon={faSpinner} />
          : 'Preview'}
        <input checked={isPreview} onChange={() => setIsPreview(true)} type="radio" name="nav" hidden />
      </label>

      <div>
        <div className="relative">
          <textarea
            placeholder="Editează folosing Markdown..."
            ref={textareaRef}
            disabled={isPreview || disabled}
            className={`${isPreview ? 'd-none absolute' : ''}`}
            value={markdown}
            rows={10}
            onChange={textareaInput}
            onPaste={paste}
          />
          <div ref={previewRef} className={`${isPreview ? '' : 'd-none absolute'}`} />
        </div>
        {!disabled && (
        <footer className="text-right relative">
          {!isPreview && (
          <label className="absolute">
            {isUploading ? <FontAwesomeIcon className="rotate" icon={faSpinner} /> : 'Adaugă imagini'}
            <input
              ref={fileInputRef}
              disabled={isUploading || disabled}
              type="file"
              multiple={false}
              accept={IMAGES_MIME_TYPES.join(',')}
              onChange={fileInput}
              hidden
            />
          </label>
          )}

          <FontAwesomeIcon icon={faMarkdown} width="20" />
        </footer>
        )}
      </div>
    </div>
  );
}
Example #2
Source File: theme.ts    From NextJS-NestJS-GraphQL-Starter with MIT License 4 votes vote down vote up 
theme: ThemeConfig = {
  Popover: {
    Title: {
      styles: {
        base: {
          paddingRight: 'major-1'
        }
      }
    }
  },
  Tooltip: {
    Content: {
      styles: {
        base: css`
          z-index: 999;
        `
      }
    }
  },
  PageWithSidebar: {
    styles: {
      base: css`
        z-index: 10;
        position: relative;
      `
    }
  },
  PageWithHeader: {
    styles: {
      base: css`
        display: flex;
        flex-direction: column;
        .bb-PageWithHeaderContent {
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        .bb-PageContentWrapper {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 0%;
        }
      `
    }
  },
  Container: {
    styles: {
      fluid: {
        maxWidth: '100%'
      }
    }
  },
  Icon: {
    styles: {
      base: {
        color: 'text300'
      }
    },
    iconSets: [
      {
        icons: [
          faComment,
          faThumbsUp,
          faBookmark,
          faTrashAlt,
          faPlusSquare,
          faFileCode,
          faArrowAltCircleLeft,
          faArrowAltCircleRight,
          faShareSquare,
          faImage
        ],
        prefix: 'r-',
        type: 'font-awesome'
      },
      {
        icons: [faMarkdown, faJs, faGithub, faReddit, faGoogle],
        prefix: 'b-',
        type: 'font-awesome'
      }
    ]
  },
  global: {
    fontSize: 16,
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  fonts: {
    // default: 'Comic Sans MS'
  },
  palette: {
    primary: '#d504f8'
  },
  breakpoints: {
    mobile: 520,
    tablet: 960
  },
  SelectMenu: {
    styles: {
      base: {
        backgroundColor: 'white'
      }
    }
  },
  Button: {
    styles: {
      base: {
        color: 'white'
      },
      ghost: {
        color: 'primary',
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      },
      outlined: {
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      }
    },

    defaultProps: {
      palette: 'primary'
    }
  },
  Text: {
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  Heading: {
    styles: {
      base: {
        color: 'text300'
      }
    },

    h3: {
      styles: {
        base: {
          color: 'text300',
          fontSize: '1.25rem'
        }
      }
    }
  }
}