• This repository has been archived on 18/Apr/2023
  • Stars
    star
    1,152
  • Rank 40,501 (Top 0.8 %)
  • Language
    Swift
  • License
    Apache License 2.0
  • Created almost 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links

โš ๏ธ This project is deprecated (2023-04-18) โš ๏ธ

Unfortunately, we were unable to find external contributors. Feel free to fork this project. If a fork takes off, message us on our Discord and we can look at adding a link to the new project in this README.

RichTextView

Cocoapods Carthage compatible Builds
All Contributors Discord License - Apache-2 Maturity badge - level 3 Pull Reminders

iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links

Installation

Using Cocoapods

Simply add the following to your Podfile:

pod 'RichTextView'

And run pod install in your repo.

Using Carthage

Simply add the following to your Cartfile:

github "tophat/RichTextView"

And run carthage update --platform iOS in your repo.

Usage

You can instantiate a RichTextView by importing the project first:

import RichTextView

To init a RichTextView:

let richTextView = RichTextView(
    input: "Test",
    latexParser: LatexParser(),
    font: UIFont.systemFont(ofSize: UIFont.systemFontSize),
    textColor: UIColor.black,
    isSelectable: true,
    isEditable: false,
    latexTextBaselineOffset: 0,
    interactiveTextColor: UIColor.blue,
    textViewDelegate: nil,
    frame: CGRect.zero,
    completion: nil
)

You can also update an existing RichTextView as follows:

richTextView.update(
    input: "Test",
    latexParser: LatexParser(),
    font: UIFont.systemFont(ofSize: UIFont.systemFontSize),
    textColor: UIColor.black,
    latexTextBaselineOffset: 0,
    interactiveTextColor: UIColor.blue,
    completion: nil
)

The parameters are defined as follows:

  • input - The string you want to render
  • latexParser - You can pass your own class that conforms to LatexParserProtocol if you want to handle LaTeX parsing in a custom way. Currently we use the iosMath Pod to handle LaTeX parsing by default
  • font - The font of the text to render
  • texColor - The color of the text to render
  • isSelectable - A property that determines whether or not RichTextView is selectable
  • isEditable - A property that determines whether or not RichTextView is editable
  • latexTextBaselineOffset - The baseline offset of the attributed text attachment that represents any LaTeX text that needs to be rendered
  • interactiveTextColor - The text color of any interactive elements/custom links (see Interactive element in Formatting the input)
  • textViewDelegate - A RichTextViewDelegate - conforms to UITextViewDelegate and also has handling when interactive elements/custom links are tapped
  • frame - A CGRect that represents the frame of the RichTextView
  • completion - A completion block to handle any errors that might be returned. The input will still render even if there are errors, however it might look differently than expected.

Formatting the input

In order for the RichTextView to handle the various use cases it might encounter, the input string needs to be formatted as follows:

  • LaTeX: Put any text you want to render as LaTeX in between two [math] and [/math] tags. Example: [math]x^n[/math]
  • Code: Put any text you want to render as code in between two [code] and [/code] tags. Example: [code]print('Hello World')[/code]
  • HTML/Markdown: No formatting necessary
  • YouTube Videos: Put the ID of the YouTube video in a YouTube tag as follows: youtube[dQw4w9WgXcQ]. The YouTube ID of any video can be found by looking at the URL of the video (Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ) and taking the value right after the v= URL parameter. In this case the ID of the YouTube video is dQw4w9WgXcQ
  • Vimeo Videos: Put the ID of the Vimeo video in a Vimeo tag as follows: vimeo[100708006]. The Vimeo ID of any video can be found by looking at the URL of the video (Example: https://vimeo.com/100708006) and taking the value right after the first /. In this case the ID of the Vimeo video is 100708006
  • Interactive element: If you want to add text that has custom handling when you tap it, put the text in between two [interactive-element id=<id>] and [/interactive-element] tags. By doing this, when a user taps this text it will call the didTapCustomLink function of RichTextViewDelegate with the ID of the text that represents the interactive element (<id>), so be sure to hook into RichTextViewDelegate to capture this.

Screenshots

Check out the sample project in the Example root folder to see the screenshots above in action!

Architecture

Architecture

Contributing

Simply clone the repo, run pod install and you should be good to go

If you want to visually devQA your changes you can navigate to the Example project (found in the root Example folder), run pod install and then build and run the app. This will show you some common usages of the RichTextView.

The example project points to the local copy of the RichTextView pod, so any changes made locally will be reflected in the sample project.

However, you need to be on the legacy build system to see your changes reflected. There is a known issue with caching development Pods and XCode 10.

Feel free to add additional input/output examples to the example project, especially if you add any new functionality.

Also, be sure to run the unit/UI tests locally as part of the devQA process.

Credits

Thanks goes to these wonderful people (emoji key):


Ahmed Elkady

๐Ÿ’ป ๐Ÿค” โš ๏ธ

Orla Mitchell

๐Ÿ’ป ๐Ÿค” ๐Ÿ‘€

Jake Bolam

๐Ÿš‡๐Ÿ“–

Sanchit Gera

๐Ÿ“–

Monica Moore

๐ŸŽจ

Brandon Baksh

๐Ÿ“–

Siavash Bidgoly

๐Ÿš‡

Stephen Truong

๐Ÿ“–

Thanks to Carol Skelly for donating the Github organization and Kevin Zhow for donating the Pod name!

More Repositories

1

syrupy

๐Ÿฅž The sweeter pytest snapshot plugin
Python
479
star
2

yvm

๐Ÿงถ Manage multiple versions of Yarn (deprecated)
JavaScript
312
star
3

monodeploy

๐Ÿš Like semantic-release and Lerna, but for Yarn modern workspaces
TypeScript
106
star
4

with-immutable-props-to-js

๐Ÿ˜ˆ A higher-order component for keeping Immutable objects outside your presentational components
JavaScript
76
star
5

sanity-runner

Automate your sanity tests against a chrome browser running in AWS Lambda. Can be implemented into deployment pipelines for easy post-deploy tests or can be run on the regular to determine if your site starts regressing
TypeScript
41
star
6

codewatch

[deprecated] Monitor and manage deeply customizable metrics about your python code using ASTs
Python
38
star
7

jenkins-timeline-plugin

A build timeline to facilitate the inspection of Jenkins pipelines and identify bottlenecks.
JavaScript
34
star
8

dont-waste-your-ducking-time

๐Ÿ“ An opinionated guide on how to test Redux ducks
JavaScript
27
star
9

yarn-plugin-licenses

Audit your dependency licenses with this yarn berry plugin
TypeScript
26
star
10

django-training

๐Ÿ Master the Django ORM for fun and profit
Python
24
star
11

ormar-postgres-extensions

Extensions to the Ormar ORM to support PostgreSQL specific types
Python
22
star
12

semantic-release-firefox-add-on

๐ŸฆŠ A Semantic Release plugin to sign Firefox Add Ons using web-ext
JavaScript
19
star
13

serverless-slack-invite

A serverless service providing badge and invitation gateway for public Slack channels
JavaScript
10
star
14

eslint-config

๐Ÿฆˆ Top Hat's shareable eslint configuration
TypeScript
9
star
15

commit-utils

๐Ÿ’ฌ Top Hat's commitlint config, including a commitizen adapter and conventional changelog preset
TypeScript
9
star
16

getting-started

Home for Top Hat Open Source's contributing docs and policies
8
star
17

opensource.tophat.com

Open source portal
TypeScript
5
star
18

react-vector-graphics

โš›๏ธ Transform SVGs into React components
TypeScript
4
star
19

networkjs

A utility that monitors a browser's network and emits connectivity events
JavaScript
3
star
20

yarn-plugin-semver-up

Yarn plugin to update dependencies while respecting range restrictions
TypeScript
3
star
21

commit-watch

Project has been moved to https://github.com/tophat/commit-utils
JavaScript
3
star
22

oss-metrics-dashboard

Python
3
star
23

new-project-kit

Some odds and ends to help you get started with new Top Hat Open Source repos quickly
3
star
24

lms-connector

Generic gateway interface for connecting to different learning management systems
Python
2
star
25

ghost-imports-buster

๐Ÿ‘ป Root out imports that are either unused or undeclared in your package.json ๐Ÿ‘ป
TypeScript
2
star
26

eslint-import-resolver-require

JavaScript
1
star
27

yvm-github-gateway

yvm github gateway for yvm (to avoid GitHub rate limiting)
JavaScript
1
star
28

homebrew-bar

๐Ÿบ Top Hat Homebrew Open Bar
Ruby
1
star